前端制造动画效果总结

最新推荐文章于 2022-09-26 08:30:00 发布

Ghostne

最新推荐文章于 2022-09-26 08:30:00 发布

阅读量334

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43165525/article/details/107794939

版权

BIGO三次技术面总结之动画效果

因为这个模块比较大，所以独立放了，你也可以当作是前段动画效果的一个简介吧

css3
@keyframes和animation实现动画效果
Css3@keyframes规则是创建动画，规则指定一个css样式从目前的样式变更为新的样式。
使用@keyframes创建动画需要把它绑定到一个选择器上，否则不会有效果，那么@keyframs有两个非常重要的属性，规定动画的名称和时间，时间默认值是0.
例如@keyframes myFirstAn 2s,因为是css3属性，因此也有很多不同浏览器的使用情况，列举3个个常用的。
@-webkit-keyframes myFirstAn 2s (作用于safari 和 chrome)
@-moz-keyframes myFirstAn 2s (firefox)
@o-keyframes myFirstAn 2s (opera)
自然animation也是用一样的前缀，因为动画是一种样式变换成另一种样式的效果，因此使用 from to就变得很形象了，那如果我们要在这段时间变换多种形态，那我们就可以设立段，把一整段时间规划成100%，这样我们便可以细节化处理样式的变化了，同时为了得到最佳的浏览器支持，我们应该始终定义0% 和100%的样式.范例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #animation{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            /* 从左往右依次是名称 周期时间 速度曲线 开始延迟 播放次数 播放效果（顺逆时针） 停止播放应用的样式 */
            -webkit-animation: myAni 5s linear 1s infinite alternate ;
        }
        @-webkit-keyframes myAni
        {
            0%   {background:red; left:0px; top:0px;}
	        25%  {background:yellow; left:200px; top:0px;}
	        50%  {background:blue; left:200px; top:200px;}
	        75%  {background:green; left:0px; top:200px;}
	        100% {background:red; left:0px; top:0px;}
        }
    </style>    
</head>
<body>
    <span>
        注意这个动画在ie9之前的版本是无效的，而且我写的只能用于chrome或者Safari
    </span>
    <div id="animation"></div>  
</body>
</html>

接下来用原生JS来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        #nav{
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
<body>
    <button onclick="run">变宽</button>
    <div id="nav"></div>
</body>
<script>
    // 获取要操作的dom元素
    var elem=document.getElementById('nav');
    // 动画配置
    var options={
        width:'200px',
        // 动画持续时间
        duration:1000
    };
    // 按钮触发动画
    function run(){
        animate.call(elem,options);
      }
    // 动画逻辑（这段比较复杂，多看几次）
    // 思路就是通过setInterval来控制动画效果和刷新速率
    function animate(options) {
        // 定时器
        var timer=null;
        // 初始宽度和结束宽度
        var startWidth=parseInt(window.getComputedStyle(elem)['width']);
        var endWidth=parseInt(options.width);
        function createTime() {
            // 新建时间  因为下面的调用，这个应该是运行很多次吧？每隔一段时间获取新的时间
            return(+new Date);
        }
        // 难道这个只运行一次？赋予的都是最初的时间？用const会不会好一点？
        var startTime=createTime();
        console.log(startTime);       
        function logic() { 
            // 开始时间+运行时间-当前时间得到已经变换的时间段
            var remain=Math.max(0,startTime+options.duration-createTime());
            // 变成百分比状态,1代表已经完成转换，0代表未开始转换或刚开始转换
            var percent=1-(remain/options.duration)
            // 那么刚在运行的时间点时的宽度就可以得到了
            var nowWidth=startWidth+(endWidth-startWidth)*percent;
            // 设置那个点的样式
            function setStyle(nowWidth){
                elem.style['width']=nowWidth+'px';
            }
            if(percent === 1){
                setStyle(nowWidth);
                clearInterval(timer);
                timer=null;
            }
            else
            {
                setStyle(nowWidth);
            }
         }
         timer=setInterval(logic,13);
    }
</script>
</html>

而同样的效果，JQuery可以极大的缩短代码量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
    <style>
        #animate{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            position: relative;
            margin: 10px;
        }
    </style>
<body>
    <button id="wider">变宽</button>
    <button id="reset">reset</button>
    <div id="animate"></div>
    <script>
        $(function(){
            $("#wider").click(function () { 
                $("#animate").animate({width:"200px"})
             })
             $("#reset").click(function(){
                $("#animate").animate({width:"100px"})
             })
        })
    </script>
</body>
</html>

接下来用vue写一个
vue有很多的钩子函数可以实现动画，v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active
v-leave-to等等，这里只做一个小小的淡出淡入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>       
        .fade-enter-active,.fade-leave-active{
            transition: opacity .5s;
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="demo">
        <button @click="show=!show">toggle</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el:'#demo',
            data:{
                show:true
            },
            methods:{}
        })
    </script>
</body>
</html>

有什么问题欢迎在下方评论。

Ghostne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端制造动画效果总结

BIGO三次技术面总结之动画效果因为这个模块比较大，所以独立放了，你也可以当作是前段动画效果的一个简介吧css3@keyframes和animation实现动画效果Css3@keyframes规则是创建动画，规则指定一个css样式从目前的样式变更为新的样式。使用@keyframes创建动画需要把它绑定到一个选择器上，否则不会有效果，那么@keyframs有两个非常重要的属性，规定动画的名称和时间，时间默认值是0.例如@keyframes myFirstAn 2s,因为是css3属性，因此也有很
复制链接

扫一扫