动画学习之Animate.css的使用与解析[通俗易懂]

动画学习之Animate.css的使用与解析[通俗易懂]近况近期生活比较单一。const提升自己=true;while(提升自己){写码…看书…思考…睡觉}既单一也充实,单一使我平静,充实使我保持向上的感觉,希望自己真难做到“持续学习,保持思考,不断进步”。最近看到腾讯ISUX团

大家好,又见面了,我是你们的朋友全栈君。

近况

近期生活比较单一。

    const 提升自己 = true;
    while( 提升自己 ) {
        写码
        ...
        看书
        ...
        思考
        ...
        睡觉
    }

既单一也充实,单一使我平静,充实使我保持向上的感觉,希望自己真难做到“持续学习,保持思考,不断进步”。

最近看到腾讯ISUX团队的一篇博客《H5动效的常见制作手法》,里面简单介绍了现在H5开发中实现动画效果的几种方式(GIF,逐帧动画,css3,canvas,svg,video…),实际的内容不多,但对我多少有点启发意义,感兴趣的同学不妨看看。

作为一只前端小菜鸟,前端的各个细分领域都能吸引到我,于是看了上面的博客后,挑了最感兴趣的CSS3动画来学习。对于CSS3动画,我第一个想起的就是animate.css,于是便有了这篇博客。

快速上手animate.css

animate.css

animate.css的主页简单明了,能演示各个动画的效果,目的也很简单,“just-add-water css animations”。那天好奇去搜索了一下作者Daniel Eden,真是酷到不行。

不多说,直接上学习资料:

官方github

估计读完github里面的README.md之后就不用往下看了吧,对于animate.css的用法早已了然于心,如果你还有兴趣,想看看我这个无聊的博主能写些什么东西,希望不会让你失望。

一,静态使用动画(很绕吧…)

  1. 引用animate.css

  2. 给需要动画的元素添加class

    <!-- animated是必须添加的;bounce是动画效果;infinite从语义来看也秒懂,无限循环,不添加infinite默认播放一次 -->
    <div class="animated bounce infinite">动画</div>
  3. 刷新页面就能看到动画这两个字在上下蹦。done,静态使用就这么简单

总结一下场景和优缺点吧,优点是简单呀,添加个类名就一劳永逸了,一行js代码都不用写,缺点是不能人为控制开始和停止。我能想到的场景:

①loading动画

②新开页面某些元素动一次,能吸引用户注意(如注册按钮等)

二,动态使用

掌握了上述用法之后,动态使用也不过小菜一碟。基本思路如下:

给动画对象添加类,然后监听动画结束事件,一旦监听到动画结束,立即移除前面添加的类。

这样一来,想什么时候开始和结束动画都随你了。对于这种用法(也是实际开发中最多的用法),官方给出了jQuery的封装:

//扩展$对象,添加方法animateCss
    $.fn.extend({
        animateCss: function (animationName) { 
   
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            $(this).addClass('animated ' + animationName).one(animationEnd, function() { 
   
                $(this).removeClass('animated ' + animationName);
            });
    }
});

//使用示例:
$('#yourElement').animateCss('bounce');

因为手上有个小项目没用jQuery这么高大上的库,于是自己写了个js原生的实现,也扩展了一些功能:

    //animate("选择器","动画","次数","时延")
    function animate(seletor, animation_name, count, delay) { 
   
            var target = document.querySelectorAll(seletor)
            var timer = null;
            timer = setInterval( function() { 
   
                target.forEach( function(x) { 
   
                    x.className += " animated " + animation_name;
                    x.addEventListener("animationend", function(){ 
   
                    x.className = x.className.replace(" animated " + animation_name, "");
                    });
                } )
                count --;
                if( count <= 0 ) {
                    clearInterval( timer );
                }
            }, delay)
        }
    //使用示例
    animate('.haha', "bounce", 2, 1000);

上面的代码也就是个半成品:

  1. 只监听了”animationend”事件,兼容性不好(可多次调用addEventListener监听其他事件);
  2. 先延时,再执行(将回调函数封装一下,先调用回调函数一次,再进入间隔循环)

源码解析

源码只有一份animate.css,相对简单,下面主要说说三个关键类。

一,animated
设置了动画时长和动画执行前后元素应该怎样应用样式(animation-fill-mode

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

二,infinite

设置了动画次数(无限次)

.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

三,动画类名(如:bounce)

设置使用的动画,及一些动画的初始化属性。
.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }

@keyframes bounce {
  from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

  40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }

  70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); }

  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); }
}

总的来说实现的原理比较简单,业务组织也很明确,就是三个类,比较有意思的是去研究各个动画的keyframes是怎样的,很有意思(细节远比我想象的要多),例如上面那个bounce动画,从关键帧就能看出很多细节,随意蹦两下那么粗糙。

自定义选项

这个放在最后是因为看了源码之后很自然就无师自通懂得怎么自定义了,例如想用css来控制动画次数等。

#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }

else

内联元素(如a标签)不支持bounce动画。

动画学习的最大感悟是,好想去学动画设计呀,好动感。

该博客比较浅显,适合茶余饭后随便读读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158209.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • iOS即时通讯 – IM(即时通讯)

    iOS即时通讯 – IM(即时通讯)

  • 基于CCXT接口建立的多模块数字货币量化交易模型(MMQT)在python中的实现[通俗易懂]

    基于CCXT接口建立的多模块数字货币量化交易模型(MMQT)在python中的实现[通俗易懂]目录一、前言问题的引出MMQT模型的优势二、MMQT简介1.接口模块2.风控模块3.策略模块4.反馈模块三、MMQT的代码实现1.定义中间模块(类)1.初始化2.获取账户信息、交易对信息、订单信息3.数据更新4.创建订单5.获取订单状态6.撤销订单7.获取k线信息2.定义风控模块(类)3.定义策略模块(类)1.策略模块初始化2.技术分析及交易下单3.反馈模块4.相关类实例化1.ccxt实例化2.中间类、风控类、策略类实例化3.调控程序四、回测的代码实现1.获取数据2.数据清洗3.模拟账户初始化4.回测程序五

  • IDEA激活成功教程后一直提示JetbrainsAgent 相关的弹框问题

    IDEA激活成功教程后一直提示JetbrainsAgent 相关的弹框问题激活成功教程后打开IDEA就弹框,关闭之后会自动打开浏览器,隔一会也会弹出来 也是一样的问题一开始是说把txt 和 jar 文件放一个路径下之类的方法,几经波折,发现没任何用处~最后各种搜索排查,在设置下更改配置就不弹啦~settings设置下搜索agent 取消”Instrumenting agent(requires debugger restart)”在 Reload classes after compilation:选择第一个 Always…

  • django的drf_简述django请求生命周期

    django的drf_简述django请求生命周期前言一般我们写完序列化以后,我们就会开始写视图了,drf中我们一般使用CBV的方式,也就是类视图的方式,最基础的我们会使用fromrest_framework.viewsimportAPIVi

  • dos命令进入d盘文件夹(windows cd到d盘)

    如何运行命令提示符,然后使用CD命令进入制定文件夹在win系统下进入命令提示符的方式是在开始的输入框中输入“cmd”,然后按“enter”进入。cd为进入的命令。具体步骤如下:步骤一:在pc端主界面中点击“开始”菜单栏,输入“cmd”,按“enter”进入命令提示符界面。步骤二:使用cd命令进入e盘。如何运行命令提示符,然后使用CD命令进入制定文件夹?使用CD命令进入指定文件?比如在桌面文…

  • MyBatis-Plus 之逻辑删除

    MyBatis-Plus 之逻辑删除MyBatis-Plus之逻辑删除实现概念逻辑删除:文件没有被真正的删除,只不过是文件名的第一个字节被改成操作系统无法识别的字符,通常这种删除操作是可逆的,就是说用适当的工具或软件可以把删除的文件恢复出来。物理删除:指文件存储所用到的存储区域被真正的擦除或清零,这样删除的文件是不可以恢复的,物理删除是计算机处理数据时的一个概念。逻辑删除就是对要被删除的数据打上一个删除标记,在逻辑上,数据是被删除了,但数据本身依然存在!而物理删除则是把数据从介质上彻底删除掉。正文首先创建一个数据库表,如下图

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号