修改元素动画属性(animation) , 在autoplay为false时元素其他样式属性会被动画的属性影响

[kekesita]

修改元素动画属性(animation) 时在autoplay为false的情况下 , 执行后元素其他样式属性会被动画的属性影响。

重现代码如下 可在Playground直接重现:

// #动画样式 [关键帧动画]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/animate' // 导入动画插件  

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

const rect = new Rect({
    x: 50,
    y: 100,
    id:'test',
    cornerRadius: 50,
    fill: '#fff',
    around: 'center',
    animation: { 
         ending: 'from', // 动画结束时回到起始状态 //,
        autoplay:false,
        keyframes: [
            { style: { x: 150, scaleX: 2, fill: '#ffcd00' }, duration: 1 },  // animate keyframe
            { style: { x: 50, scaleX: 1, fill: '#000' }, duration: 0.2 },
            //{ style: { x: 550, cornerRadius: 0, fill: '#ffcd00' }, delay: 0.1, easing: 'bounce-out' },
            //{ x: 50, rotation: -720, cornerRadius: 50 } // style keyframe
        ],
        duration: 3, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2 
        loop: false,
        join: false//  加入动画前的元素状态作为 from 关键帧
    }
})

leafer.add(rect);
let test = leafer.findId('test');
let nowAnimation =test['animation'];


setTimeout(()=>{
    //let testAni =  JSON.parse(JSON.stringify(nowAnimation));
   // delete testAni.keyframes;
    //console.log(testAni);
    test.animation =  nowAnimation;
     // test.animation.keyframes=[{ style: { x: 150, scaleX: 2, fill: '#ffcd00' }, duration: 1 },  ];
    //console.log(test.animation.autoplay);
},1000)


setTimeout(()=>{
    //test.animation = JSON.parse(JSON.stringify(nowAnimation));   
},2000)

1. 执行后动画因为autoplay为false没有运行这是正常表现 , 但是颜色变成了黄色
2. ending 未设置时 一个关键帧就会触发这个问题
3. ending 设置为from时 两个关键帧才会触发

[leaferjs]

收到，谢谢反馈～