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）：元素添加/删除特效(如：项目中一些表格列表和分支的创建和删除可以适用)本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-01日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录