亚伦影音工作室 发表于 2024-6-6 22:31

理解马老JS原生animate动画控制

<style>
#papa { margin: 10px -210px;
        width: 960px;
        height: 600px;background:#222 url(https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg)no-repeat center/cover;
        position: relative;overflow: hidden;
        z-index: 12345;}
#h7{ width: 200px;   opacity: 1; position: absolute;margin: 340px 600px;}

</style>
<div id="papa">
<img   id="h7" alt="" width="200" src="https://pic.imgdb.cn/item/65e712979f345e8d039e5ada.gif" />
</div>
<script>
//rot对象 ：旋转动画描述（省略首帧）
const rot = {transform: 'translate(0px,0px)',
transform: 'translate(-420px,-200px)'   
      
};

// rotAttr对象 ：动画属性值列表
const rotAttr = {
    duration: 6000,
    iterations: 1,
};

// 运行并获得动画操作入口 rotate
const rotate = h7.animate(rot, rotAttr);

//图片单击事件
h7.onclick = () => {
    rotate.playState === 'running' ? rotate.pause() : rotate.play();
};
</script>

红影 发表于 2024-6-7 08:43

这个尝试很有意思。貌似点击反倒是动了，和黑黑的那个是反的，那个是点击暂停呢{:4_204:}

梦油 发表于 2024-6-7 09:40

欣赏佳作，问候亚伦。
页: [1]
查看完整版本: 理解马老JS原生animate动画控制