专栏首页经年隔世Ant Motion动效插件分析

Ant Motion动效插件分析

Ant Motion动效插件分析

一、原理分析

特效是通过组件内部的js和css两者共同控制。

通过调用封装的组件,部署组件DOM结构和其上面的参数完成动画效果的添加,同时用户可以更改组件的参数以及自定义组件的样式来实现所需要的展示效果。

使用起来比较方便,应用场景明确有针对性,但是工作量大,适合团队开发。

二、方案分析

(1):第一种方案是可以尝试在110项目的基础上以类似Ant Motion的特效制作成组件,封装组件的dom节点和样式,以及添加一些组件的事件,初步可以添加一些类似弹窗特效,表格增删特效,按钮点击特效之类。

例:<QueueAnim type={['right', 'left']} ease={['easeOutQuart', 'easeInOutQuart']}></QueueAnim>

(2):第二种方案可以用只封装动画效果的方法制作动效组件库,纯css样式组件。通过给要加动效的元素添加指定的class类名来展示特效。比如hover添加了指定类名(如:hv-fadeIn)的元素时执行动效。

例:<div class="hv-fadeIn"></div>

(3):第三种方案可以制作一个纯js组件,动效样式通过用户自定义。通过封装的方法给元素绑定特效,可以兼顾到hover和click两中交互效果,也可以只执行一次设定的动效。

例:go函数参数:绑定元素,触发方式option(hover/click),动画效果(分为transition和animation两种),动画时间,执行过渡的线性效果(支持cubic-bezier),动效完成回调函数,延迟时间
go(dom元素,option,{ css属性:css值},transitionDuration(单位:毫秒),transitionTiming,transitionend回调函数,transitionDelay单位:毫秒);
go(dom元素,option,keyframesName,animationDuration,animationTiming,animationend回调函数,animationDelay单位:毫秒);

三、主流动态分类

hover/点击特效:(hover类特效更适用于PC端,因为移动设备中并没有鼠标指针,移动端适合用点击类效果)

(1):元素的2D变换(放大缩小;扭动弹跳;晃动变形)
(2):元素背景的填充与文字颜色变化
(3):icon图标变换
(4):shadow阴影特效(元素升高地面出现阴影)
(5):按钮特效(button的点击交互;radio之类的单选复选框选中效果)
(6):弹出特效(select下拉框的拉开收起特效;dialog/modal弹框特效)

其它特效:

(1):出场特效(可以用于一些项目首页,滚动到对应楼层时添加出场动画,执行各种过渡组合特效)
(2):元素添加/删除特效(如:项目中一些表格列表和分支的创建和删除可以适用)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用jQuery中hover事件时遇到的一个小问题

    在jQuery中有一个hover()方法,它可以实现模拟css中:hover这个伪类的效果。

    colezhou
  • CSS完成元素水平垂直居中

    首先这个元素和它的父元素都要设置定位,其中这个要水平垂直居中的元素需设置绝对定位absolute, 然后再给它设置样式{left: 0;right: 0;...

    colezhou
  • 将做好的前端组件制作成npm包发布

    这个问题是我们使用了淘宝镜像的问题,使用的是淘宝源cnpm,登陆到的是cnpm,我们把它切换成npm就好了。

    colezhou
  • 主动编程与被动编程!(8/2原则的续集)

    1、被动编程。      就好比对日外包的项目,不是太了解,只是有所耳闻。听说日本公司那面会发过来一份(也许用一批更好一些)很详细的文档,里面的内容就是编写...

    用户1174620
  • 腾讯开源启航

    今天继续跟大家分享在腾讯分享日大会上的内容回顾。来自腾讯TEG研发管理部的黄志斌分享了腾讯开源的一些现状、思考和展望。 ? 漫谈腾讯开源 腾讯首批将开源6个非常...

    腾讯大讲堂
  • python源码阅读笔记之线程机制

    哒呵呵
  • RNA-seq(10):KEGG通路可视化:gage和pathview

    开始用gage包进行富集分析,gage()函数需要fold change 和Entrez gene IDs

    Y大宽
  • python: 判断tuple、list、dict是否为空

    Petrichor_
  • 18/03/18 04:53:44 WARN TaskSchedulerImpl: Initial job has not accepted any resources; check your clu

    1:遇到这个问题是在启动bin/spark-shell以后,然后呢,执行spark实现wordcount的例子的时候出现错误了,如: scala> sc.tex...

    别先生
  • Spring-Boot - 初步搭建

    official document:http://projects.spring.io/spring-boot/ 项目代码: https://github.co...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券