React总结篇之十_动画
- 在网页中动画的实现方式
- React提供的动画辅助工具ReactCSSTransitionGroup
- React-Motion动画库
一、动画的实现方式
在网页中,实现动画无外乎两种方式:
- CSS3方式,也就是利用浏览器对CSS3原生支持实现动画;
- 脚本方式,通过间隔一段时间用JavaScript来修改页面元素样式来实现动画。
CSS3方式
CSS3的方式下,开发者一般在CSS中定义一些包含CSS3transition语法的规则。在某些特定情况下,让这些规则发生作用,于是浏览器会将这些规则应用于指定的DOM元素上,产生动画的效果。这种方式效率比脚本方式高,因为浏览器原生支持,省去了JavaScript的解释执行负担,有的浏览器甚至可以充分利用CPU加速的优势,进一步增强动画渲染的性能。
不过CSS3也有不少缺点:
首先,CSS3transition对一个动画规则的定义是基于时间和速度曲线的规则。就是CSS3的动画过程要描述成“在什么时间范围内,以什么样的运动节奏完成动画”,这可能不利于动画的流畅,因为动画是可能被中途打断的。
因为CSS3transition总是一闪而过,捕捉不到中间状态,只能一遍一遍用肉眼去检查动画效果,这给开发者带来了很大的痛苦。- 脚本方式
相对于CSS3方式,脚本方式最大的好处就是更强的灵活性,开发者可以任意控制动画的时间长度,也可以控制每个时间点上动画渲染的样式,可以更容易做出丰富的动画效果。
脚本方式的缺点也很明显,动画过程通过JavaScript实现,不是浏览器原生支持,消耗的计算资源更多。
二、 ReactCSSTransition规则
Transition并不能代替CSS,相反,它离不开CSS,其扮演的角色是让React组件在生命周期的特定阶段使用不同的CSS规则,而连接React组件和CSS需要遵守一些规则。
- 类名规则
配合TransitionGroup中的transitionName属性,对应CSS规则中类名遵从统一的规则。类名由-符号把几个单词连接起来,除了transitionName的值,还可以有这几个单词:enter代表“装载”开始时的状态,leave代表“卸载”开始时的状态,active代表动画结束时的状态。
假设transitionName为sample,那么定制相关React组件的类名就是:- sample-enter
- sample-enter-active
- sample-leave
- sample-leave-active
其中active后缀类名的作用比较特殊,因为用CSS3的transition功能实现动画,必须定义“开始状态”和“结束状态”,只有存在这两个状态,CSS3才知道如何将元素属性从“开始状态”在指定的时间按照指定的速度曲线转换为“结束状态”,这两个状态必须定义在两个不同的CSS类中,否则CSS3无法区分。
- 动画时间长度
使用TransitionGroup,动画的持续时间在两个地方都要指定,第一个是在Transition-Group中以Timeout为结尾的属性,第二个地方是在CSS文件中transition-duration规则。 - 装载时机
TransitionGroup要发挥作用,必须自身已经完成装载了。因为Transition也只是一个React组件,功能只有在被装载之后才能发挥。 - 首次装载
在Todo应用中,TransitionGroup自身被装载的时候,可能已经包含了若干个TodoItem组件实例,但这些TodoItem组件虽然经历了装载过程,却没有动画效果,只有在TransitionGroup被装载之后新加入的TodoItem组件才有动画效果。如果想让这些子组件也有动画效果,那就要使用appear过程,appear代表的就是随TransitionGroup一起“出现”的过程。
三、React-Motion动画库
React-Motion使用的是脚本方式。
react-motion中大量的使用了“以函数为子组件”的模式,react-motion提供的组件,都预期接受一个函数作为子组件。举例如下:
Motion组件的defaultStyle属性指定了一个初始值,style属性指定了目标值,期间不断调用作为子组件的函数,完成动画过程。
很显然,motion并不直接参与动画的绘制,它只是提供参数。具体的绘制过程,由作为子组件的绘制函数来完成,很显然这种“以函数为子组件”的模式带来了很大的灵活度。
转载于:https://blog.51cto.com/chengyanli/2327141
React总结篇之十_动画相关推荐
- React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇 动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
- react ui框架_Web开发 React 学习(二十)连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建 测开技能--Web开发 React 学习(三)元素的渲染 测开技能--Web开发 R ...
- React Native入门(十四)之动画(1)Animated详解
前言 在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...
- map根据value值排序_凯哥带你从零学大数据系列之Java篇---第十九章:集合(Map+Collections)...
温馨提示:如果想学扎实,一定要从头开始看凯哥的一系列文章(凯哥带你从零学大数据系列),千万不要从中间的某个部分开始看,知识前后是有很大关联,否则学习效果会打折扣. 系列文章第一篇是拥抱大数据:凯哥带你 ...
- 安卓修改电池容量教程_图吧小白教程 篇三十二:手机拆换原装电池教程——替换寿命将届的原厂电池,提升手机续航...
图吧小白教程 篇三十二:手机拆换原装电池教程--替换寿命将届的原厂电池,提升手机续航 2019-12-05 13:01:04 1点赞 20收藏 1评论 你是AMD Yes党?还是intel和NVIDI ...
- 多麦克风做拾音的波束_乱侃外设 篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评...
原标题:乱侃外设 篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评 乱侃外设 篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评 20 ...
- thinkpad x230评测_蘑菇爱搞机 篇五十九:手持联想Thinkpad X230的我,为什么没有升级笔记本——小米Air全金属超轻薄笔记本 体验评测...
蘑菇爱搞机 篇五十九:手持联想Thinkpad X230的我,为什么没有升级笔记本--小米Air全金属超轻薄笔记本 体验评测 2019-04-15 18:56:32 18点赞 20收藏 25评论 一. ...
- 【Android的从零单排开发日记】之入门篇(十六)——Android的动画效果
什么是动画,动画的本质是通过连续不断地显示若干图像来产生"动"起来的效果.比如说一个移动的动画,就是在一定的时间段内,以恰当的速率(起码要12帧/秒以上,才会让人产生动起来的错觉) ...
- 动画骨骼【Visual C++】游戏开发五十二 浅墨DirectX教程二十 骨骼动画来袭(一)...
间时紧张,先记一笔,后续优化与完善. 本系列文章由zhmxy555(毛星云)编写,载转请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/detail ...
最新文章
- java实现微信创建菜单_java实现微信公众平台自定义菜单的创建示例
- 2021-03-15 final value theorem 终值定理
- linux怎样以root用户运行,如何在Linux机器中以root用户身份运行Elastic...
- taro 缺点_Taro小程序富文本解析4种方法
- 关于细分到字段的权限系统_操作系统中的细分
- php form 后台函数,Discuz!开发之后台表单生成函数介绍
- IPv6地址配置与应用
- deepin桌面为什么那么卡_UOS/Deepin桌面卡死该怎么办
- python利器的使用-python开发利器之ulipad的使用实践
- HTML简洁自适应个人码农主页源码
- 嘀嘀的费用是优步的两倍?
- wampserver安装好后相关的设置和在不同的电脑上测试
- android6.0 framwork修改
- Vibrant Ink Theme for IntelliJ IDEA
- GDAL+Python实现栅格影像处理之栅格矢量化及矢量栅格化
- bzoj2946 [Poi2000]公共串(后缀数组 || 后缀自动机)
- 光敏传感器实验报告_光敏传感器光电特性测量实验分析报告.ppt
- MySQL语法练习---常见题型练习
- 环状二肽,82863-65-8,cyclo(Leu-Tyr)
- 手机qq2005 没声音