leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

组件flow开启自动布局后无法实现,size/position 相关的动画,后续能否支持?

Open kekesita opened this issue 4 months ago • 1 comments

组件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)

kekesita avatar Sep 06 '25 02:09 kekesita

收到,谢谢反馈,后续会进一步开发自动布局相关的功能,动画功能会将这个考虑进去。

预计得到下个月,如果近期有想到比较快速的办法,也可能这个月就会支持。

leaferjs avatar Sep 08 '25 00:09 leaferjs