亚伦影音工作室 发表于 2024-6-7 12:36

理解JS原生animate动画函数之二

本帖最后由 亚伦影音工作室 于 2024-6-7 13:19 编辑 <br /><br /><style>
#papa { margin: 150px -150px;width: 960px;height: 600px;background:#222 url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover;position: relative;overflow: hidden;z-index: 1;}
#h7{ width: 960px;height: 600px; opacity: 1; position: absolute;margin: 0px 0px;z-index: 2;cursor: pointer;}
</style>
<div id="papa">
<img id="h7" alt=""src="https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg" / title="关闭/开启-动画和音乐">
<audio id="aud" src="https://s138.ananas.chaoxing.com/sv-w7/audio/81/eb/78/42a5587f35eea17005eac76036129fa0/audio.mp3" autoplay loop></audio>
</div>
<script>
// ani数组 ：keyframes参数，切换、变色动画描述
const ani =
        [{clipPath: 'polygon(50% 0%, 50% 50%, 0% 50%, 50% 50%,50% 100%, 50% 50%, 100% 50%, 50% 50%)', opacity:'1',filter: 'hue-rotate(0)'},
       {clipPath: 'polygon(50% 0%, 25% 25%, 0% 50%, 25% 75%,50% 100%, 75% 75%, 100% 50%, 75% 25%)', opacity:'1', offset:0.4,filter:'hue-rotate(360deg)'},
       {clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'1', offset:0.8},
       {clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'0',filter: 'hue-rotate(0deg)'}];
// aniAttr对象 ：options参数，动画属性值列表
const aniAttr = {
    duration: 11000,
    iterations: Infinity,
};

// 运行并获得动画操作入口 h7Ani
const h7Ani = h7.animate(ani, aniAttr);
//图片单击事件 : 暂停或继续动画和音乐
h7.onclick =function() { aud.paused ?(aud.play(),h7Ani.play()): (aud.pause(),h7Ani.pause())};
</script>

亚伦影音工作室 发表于 2024-6-7 13:09

马老师这样加上音乐对吗?

起个网名好难 发表于 2024-6-7 13:17


<style>
#oBlk        {
        --w:960px;--h:600px;
        width:var(--w);height:var(--h);
        margin-left:calc(50% - 0.5 * var(--w));
        overflow:hidden;
        position:relative;
        border-radius:32px;
        box-shadow:4px 4px 10px black;
        background-color:hsla(60, 50% , 80%, .4);
        & img        {
                width:var(--w);height:var(--h);opacity:0;
                position:absolute;left:0px;top:0px;
        }
}
</style>
<div id="oBlk">
<img src="https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg" />
<img src="https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg" />
</div>

<script>
{
let keyFrames = [[
        { clipPath: 'ellipse(10% 10% at 50% 50%)', opacity: '0.1', offset: 0.0},
        { clipPath: 'ellipse(30% 30% at 50% 50%)', opacity: '0.7', offset: 0.05 },
        { clipPath: 'ellipse(50% 50% at 50% 50%)', opacity: '1.0', offset: 0.15 },
        { clipPath: 'ellipse(75% 75% at 50% 50%)', opacity: '0.2', offset: 0.30 },
        { clipPath: 'ellipse(75% 75% at 50% 50%)', opacity: '0.0', offset: 0.55 }],
       [
             {clipPath: 'polygon(50% 0%, 50% 50%, 0% 50%, 50% 50%,50% 100%, 50% 50%, 100% 50%, 50% 50%)', opacity:'0.1', offset: 0.0    },
         {clipPath: 'polygon(50% 0%, 25% 25%, 0% 50%, 25% 75%,50% 100%, 75% 75%, 100% 50%, 75% 25%)', opacity:'0.7', offset: 0.05   },
         {clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'1.0', offset: 0.35   },
         {clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'0.0', offset: 0.55   }
    ]
];

let EffectTiming = {
    duration: 16000,
        iterations: Infinity,
        delay: 0,
    fill: 'forwards'
};

let imgSet = document.querySelectorAll("#oBlk > img");
EffectTiming.duration = 8000 * imgSet.length;
console.log(EffectTiming.duration);
for(let i = 0; i < imgSet.length; i++)        {
        EffectTiming.delay = i * 8000;
        imgSet.animate(keyFrames, EffectTiming);
}


}
</script>

亚伦影音工作室 发表于 2024-6-7 13:29

起个网名好难 发表于 2024-6-7 13:17
#oBlk        {
        --w:960px;--h:600px;
        width:var(--w);height:var(--h);


手机没效果！

起个网名好难 发表于 2024-6-7 13:41

亚伦影音工作室 发表于 2024-6-7 13:29
手机没效果！

花潮网的手机版有三种方式选择：标准版、触屏版和电脑版，总有一种能正确显示的。

红影 发表于 2024-6-7 15:38

这个漂亮，已经和音乐关联了，厉害。
欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 理解JS原生animate动画函数之二