动画学习之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)
blank

相关推荐

  • eva0.4.1源码看看4

    eva0.4.1源码看看4

  • Softmax classifier[通俗易懂]

    Softmax classifier[通俗易懂]Softmaxclassifier原文链接SVM是两个常见的分类器之一。另一个比较常见的是Softmax分类器,它具有不同的损失函数。如果你听说过二分类的Logistic回归分类器,那么Softmax分类器就是将其推广到多个类。不同于SVM将 f(xi,W) 的输出结果 (为校准,可能难以解释)作为每个分类的评判标准,Softmax分类器给出了一个稍直观的输出(归一化的类概率),并且也有

    2022年10月21日
  • NativeScaler()与loss_scaler

    NativeScaler()与loss_scaler源码:classNativeScaler:state_dict_key=”amp_scaler”def__init__(self):self._scaler=torch.cuda.amp.GradScaler()def__call__(self,loss,optimizer,clip_grad=None,clip_mode=’norm’,parameters=None,create_graph=False):

    2022年10月27日
  • FlashFXP 5.4.0 注册

    FlashFXP 5.4.0 注册打开软件点击–帮助–关于–点击–右边中部的钥匙输入以下全部字母数字  FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTnsl73nIraAU149tnCQS   0hmZU3GGBQG1FtoSp5x0mUgA7bFW0qr0fKk2KCA+v2CCrFbF+q   bmLvEjV+4JCAX+H/TBpG7pdEJ8IEW09ST8t60Poou/…

  • 配置Cisco MDS光纤存储交换机配置zone[通俗易懂]

    配置Cisco MDS光纤存储交换机配置zone[通俗易懂]配置CiscoMDS光纤存储交换机(MDSMultilayerDirectorSwitch多层光纤阵列交换机)大概流程:1:创建VSAN,将端口加入VSAN2:创建ZONE,将端口加入ZONE3:创建zoneSet,将ZONE加入set,并启用zoneSet4:启用所有端口使用命令行基本配置MDS-1(config)#sw…

    2022年10月31日
  • Django(72)Django认证系统库–djoser「建议收藏」

    Django(72)Django认证系统库–djoser「建议收藏」djoser是什么?作用:Django认证系统的REST实现。djoser库提供了一组DjangoRestFramework视图,用于处理注册、登录、注销、密码重置和帐户激活等基本操作。它适用于

发表回复

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

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