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

animation动画,切换到select状态后动画失效

Open ssdmtank opened this issue 9 months ago • 1 comments

【Bug/建议】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx

环境:电脑 + window 11 + chrome 131 + leaferjs 1.4.2

` // #自定义状态 [切换状态] import { Leafer, Rect } from 'leafer-ui' import '@leafer-in/state' // 导入交互状态插件 import '@leafer-in/animate' // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = new Rect({ width: 100, height: 100,

cornerRadius: 30,
origin: 'center',
states: { // 自定义状态列表 //
    color: { fill: 'white' },
    rotate: { fill: 'yellow' },
    ra: {
        stroke: '#32cd79',
        strokeWidth: 5,
        dashPattern: [10, 10], // 绘制虚线 //
        dashOffset: 0,
        animation: { // 虚线动画
            style: { dashOffset: -20 },
            easing: 'linear',
            duration: 0.5,
            loop: true,
        }
    }

}, selectedStyle: { stroke: 'red' }, selected: false, state: 'ra', // 设置状态 transition: 1 })

leafer.add(rect)

rect.on('click', () => { // 点击切换状态 // rect.state = rect.state === 'color' ? 'rotate' : 'color' })

setTimeout(() => { rect.selected = true }, 2000)

setTimeout(() => { rect.selected = false setTimeout(() => { },200) }, 4000) `

ssdmtank avatar Apr 03 '25 08:04 ssdmtank

目前只要是切换状态animation就会失效(防止切换状态后属性相互影响,无法还原,后期我们在看看有没有优化的方案),想不失效可以单独用new Animate的方式创建动画。

leaferjs avatar Apr 03 '25 10:04 leaferjs