leafer-ui
leafer-ui copied to clipboard
组件flow开启自动布局后无法实现,size/position 相关的动画,后续能否支持?
组件flow开启自动布局后无法实现,size/position 相关的动画,后续是否有支持的规划 , 大概会在什么周期支持? 希望有css中transform的概念 不破化布局只是视觉位移, 这样更容易实现一些动画效果。
示例代码
// #自动布局
import { Leafer, Box } from 'leafer-ui'
import { Flow } from '@leafer-in/flow' // 导入自动布局插件
const leafer = new Leafer({ view: window })
let boxA = new Box({
fill: '#FF4B4B',
children: [{
tag: 'Text',
text: '1',
fill: 'white',
textAlign: 'center',
verticalAlign: 'middle',
width: 25,
height: 20
}]
});
let boxB = new Box({
fill: '#000',
animation: { // 入场动画 //
keyframes: [
{ opacity: 0, offsetX: -150 },
{ opacity:1,offsetX: 0, }
],
duration:5
},
children: [{
tag: 'Text',
text: '2',
fill: 'white',
textAlign: 'center',
verticalAlign: 'middle',
width: 25,
height: 20,
}]
});
const flow = new Flow({
fill: '#676',
width: 100,
height: 100,
children: [
boxA,
boxB
],
})
leafer.add(flow)
收到,谢谢反馈,后续会进一步开发自动布局相关的功能,动画功能会将这个考虑进去。
预计得到下个月,如果近期有想到比较快速的办法,也可能这个月就会支持。