CSS3动漫之运用requestAnimationFrame开启再次播发作用

日期:2020-10-29 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

css动漫

css3中引进了animation控制模块,此后css动漫进到了大家的视线。css动漫名符实际上,会写css款式便可以创作动漫,对1些不如何会JS的设计方案师也是较为宽容的。但也正由于这般,当你必须再次播发或说手动式开启动漫时,css的局限性就突凸显来了,终究它并不是1门程序编写語言。像这类在网页页面中建立1个按钮,点一下按钮时刚开始播发1段动漫这类活交到JS才是最适合的。

基本原理和思路

再次播发css动漫,大家只必须将CSS动漫实际效果 删掉 ,随后再 再次再加 css动漫实际效果便可。那末怎样让访问器了解大家的用意呢,今日的主角 requestAnimationFrame ,这个每日任务就交到它来进行。 requestAnimationFrame 会告知访问器--你必须实行1个动漫,并规定在下1次重绘前启用特定的回调函数涵数升级动漫。也便是 requestAnimationFrame 必须传入1个回调函数涵数做为主要参数,这个涵数会在访问器下1次重绘以前实行。 这个体制能够用花销最短的時间让访问器了解大家必须再次播发动漫的用意。

自然 requestAnimationFrame 只是在其中的1步,大家还必须再再加个小窍门-- 分离出来动漫款式 .

重要编码

<template>
    <div class="page-animate">
        <button @click="handleAnimate">刚开始动漫</button>
        <div class="rabbit-box">
            <div class="rabbit" ref="rabbit"></div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "animate",
    methods: {
      handleAnimate() {
        let $rabbit = this.$refs.rabbit;
        $rabbit.classList.remove('animated');
        window.requestAnimationFrame(()=> {
          window.requestAnimationFrame(()=>{
            $rabbit.classList.add('animated');
          })
        })
      }
    }
  }
</script>

<style lang="less">
.page-animate {
    .rabbit-box {
        margin-top: 10px;
        width: 100px;
        height: 100px;
        background:#e2b29f;
        font-size:120%;
        padding: 100px;
        border-radius: 50%;
    }

    .rabbit {
        width:5em;
        height:3em;
        background:#ffffff;
        border-radius:70% 90% 60% 50%;
        position:relative;
        box-shadow: -0.2em 1em 0 -0.75em #b78e81;
        transform:rotate(0deg) translate(⑵em,0);
        z-index:1;
        .no-flexbox & {margin:10em auto 0;}
        //tail, eye, feet
        &:before {
            content:"";
            position:absolute;
            width:1em;
            height:1em;
            background:white; // tail
            border-radius:100%;
            top:0.5em;
            left:-0.3em;
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334, // eye
                    0.5em 1em 0 white, // back foot
                    4em 1em 0 -0.3em white, // front foot
                    4em 1em 0 -0.3em white,
                    4em 1em 0 -0.4em white;;
        }
        // ears
        &:after {
            content:"";
            position:absolute;
            width:.75em;
            height:2em;
            background:white;
            border-radius:50% 100% 0 0;
            transform:rotate(⑶0deg);
            right:1em;
            top:⑴em;
            border-top:1px solid #f7f5f4;
            border-left: 1px solid #f7f5f4;
            box-shadow:-0.5em 0em 0 -0.1em white;
        }
        &.animated {
            animation: hop 1s linear;
            &:before {
                animation: kick 1s linear;
            }
        }
    }

    @keyframes hop {
        20% {
        transform:rotate(⑴0deg) translate(1em,⑵em);
            box-shadow: -0.2em 3em 0 ⑴em #b78e81;
        }
        40% {
        transform:rotate(10deg) translate(3em,⑷em);
            box-shadow: -0.2em 3.25em 0 ⑴.1em #b78e81;
        }
        60%,75% {
        transform:rotate(0) translate(4em,0);
            box-shadow: -0.2em 1em 0 -0.75em #b78e81;
        }
    }



    @keyframes kick {
        20%,50% {
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334,
                    0.5em 1.5em 0 white,
                    4em 1.75em 0 -0.3em white,
                    4em 1.75em 0 -0.3em white,
                    4em 1.9em 0 -0.4em white;
        }
        40% {
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334,
                    0.5em 2em 0 white,
                    4em 1.75em 0 -0.3em white,
                    4.2em 1.75em 0 -0.2em white,
                    4.4em 1.9em 0 -0.2em white;
        }
    }
}
</style>

实际效果:

:grin:以便生动形象1些,特意找了个兔子的CSS动漫。css类 .rabbit 中只界定了兔子的外型,沒有界定动漫有关的信息内容。大家把动漫有关的信息内容都放到了 .animated 类中。

demo传输

handleAnimate 涵数是大家的重要一部分:

  • $rabbit.classList.remove('animated') 的功效是每次点一下按钮的情况下删掉动漫实际效果。
  • requestAnimationFrame 这里用到了两次,并且是嵌套循环着应用,为什么要这般呢?实际上也好了解,有个细节--删掉Dom元素的class类后,仅有在款式再次测算后才会起效,也便是要直到下1次重绘。而 requestAnimationFrame 申请注册的回调函数涵数是下1次重绘前,因此大家必须启用两次,非常于在正中间插进了1个间隙专业用来让删掉动漫实际效果起效,随后紧接着下1次重绘再次开启动漫。

总结

javascript 相对性css更合适用来操纵动漫,动漫的开启体制和访问器3D渲染体制有关。

参照

MDN

 总结

以上所述是网编给大伙儿详细介绍的CSS3动漫之运用requestAnimationFrame开启再次播发作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!