React-引领未来的用户界面开发框架-读书笔记(四)

第10章 动画

动画可以让用户体验变得更加流畅自然,而React的TransitionGroup插件配合CSS3可以让我们在项目中整合动画效果的变得易如反掌。

通常情况下,浏览器中的动画都拥有一套极其命令式的API,你需要选择一个元素并主动移动它或者改变它的样式,已实现动画效果。这种渲染方式显得格格不入,因此React选择了一种偏声明式的方法实现动画。

CSS渐变组(CSS Transition Group)会在何时的渲染及重渲染时间点有策略地添加和移动元素的class,以此来简化将CSS动画应用于渐变的过程,这意味着唯一需要你完成的任务就是给这些class写明合适的样式。

间隔渲染以牺牲性能为代价提供饿了更多的扩展性和可控性。这种方法需要更多次的渲染,但同时也允许你为CSS之外的内容,(比如滚动条位置及Canvas绘画)添加动画。

CSS渐变组:

<ReactCSSTransitionGrouptransitionName='question'>{questions}
</ReactCSSTransitionGroup>

ReactCSSTransitionGroup 是一款插件,它在文件最顶部通过var ReactCSSTransitionGroup =React.addons.ReactCSSTransitionGroup;语句引入。 它会自动在合适的时候处理组件重渲染,同时根据当前的渐变状态调整渐变组的class以便实现组件样式的改变。

给渐变的class添加样式

为元素添加transitionName ='question'意味着给它添加饿了4个class:question-enter、question-enter-active、question-leave及question-leave-active。当子组件进入或者退出ReactCSSTranstionGroup时,CSSTransitionGroup插件会自动添加或移除这些Class。

以下是问卷编辑器中使用到的渐变样式:

survey-editor.question-enter{transform:scale(1.2);transition:transform 0.2s cubic-bezier(.97,.84,.5,1.21);
}
.survey-editor.question-enter-active{transform:scale(1);
}
.survey-editor.question-leave{transform:translateY(0);opacity:0;transition:opacity 1.25,transgorm 1scubic-bezier(.52,-0.25,.52,.95);
}
.survey-editor.question-leave-active{opacity:0;transform:translateY(-100%);
}

渐变生命周期

question-enter与question-enter-active的区别在于,question-enter这个class是组件被添加到渐变组后即刻添加上的,而question-enter-active则是在下一轮渲染时添加的,这样设计让你能轻松的定义渐变开始时候的样式,结束时候的样式以及如何进行渐变。

例如:当问卷调查器重的问题被添加到列表的时候他们首先用scale(1.2)进行发大,然后渐变到正常的scale(1)状态,总共花了0.2秒,这就创造出了一种你看到的跳出来的效果。默认情况下,渐变组同事开启了进入和退出的动画,你可以通过给组件添加transitionEnter={false}或tranitionLeave={false}属性来禁用其中一个或全部禁用,除了可以控制选择哪些动画外,我们还能根据一个可配置 的值在特定的情况下禁用动画,像是这样:

<ReactCSSTransitionGrouptransitionName='question'transitionEnter={this.props.enableAnimations}transitionLeave={this.props.enableAnimations}>{questions}
</ReactCSSTransitionGroup>

使用渐变组的隐患

使用渐变组主要有两个重要的隐患需要注意

首先,渐变组会延迟子组件的移除直到动画完成,这意味着如果你把一个列表的组件包裹进一个ReactCSSTransitionGroup中,却没有trasitionName属性指定的class明确任何CSS,这些组件将无法被移除——甚至当你尝试不再渲染它们时也不可以。

其次渐变组每一个子组件都必须设置一个独一无二的key属性,渐变组使用这个属性来判断组件究竟是进入还是退出,因为如果没有设置key属性动画可能无法执行,同时组件会变得无法移除。

注意,即使渐变组只有一个子元素,它也需要设置一个key属性。

间隔渲染

使用CSS3动画能够获得巨大的性能提升并拥有简洁的代码,但他们并不总是解决问题的正确工具,有些时候,你必须为比较老,不支持CSS3的浏览器做兼容,还有些时候你想为CSS属性之外的东西添加动画,比如滚动条位置和Canvas绘画,这些情况下,间隔渲染能够满足我们的要求,但是相比CSS3动画来说,它会带来一定的性能损耗。

间隔渲染最基本的思想就是周期性的触发组件状态更新,以明确当前处于整个动画时间中的什么阶段。通过在组件的render方法中加入这个状态值,组件能够在每次状态更新触发的重渲染中正确的表示当前的动画阶段。

因为这种方法设计多次重渲染,所以通常最好和requestAnimationFrame一起使用以避免不必要的渲染,不过在requestAnimationFrame不被支持或不可用的情况下,降级到不那么智能的setTimeout就是唯一的选择了。

使用requestAnimationFrame实现间隔渲染

假设你希望使用间隔渲染将一个div从屏幕的一边移动到另一边,可以通过给他添加position:absolute并随着时间变化不停的更新left属性或者top属性来实现,根据消耗时间内的变化总量,用requestAnimationFrame来实现这个动画应该可以得出一个流畅的动画。

示例:page90

使用setTimeout实现间隔渲染

尽管requestAnimatingFrame总体上能够以最小的性能损耗实现最流畅的动画,但它在比较老的浏览器上无法使用的,而且它被调用的次数可能比你想象的更频繁(也更加无法预测)。这些情况下你可以使用setTimout。

示例:page91

总结:

  1. 在状态改变过程中,使用CSS3和渐变组高效的应用渐变动画。
  2. 使用requestAnimationFrame为CSS之外的东西添加动画,如滚动条位置或者Canvas绘画。
  3. 当requestAnimationFrame不被支持时降级到setTimeout方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio开发环境搭建准备

Android Studio 是一个Android开发环境&#xff0c;基于IntelliJ IDEA. 类似 Eclipse ADT&#xff0c;Android Studio 提供了集成的 Android 开发工具用于开发和调试。 Android Studio开发环境搭建前&#xff0c;我们需要进行安装前的准备工作&#xff0c;本篇以在Windows 7平台…

管理中眼镜蛇效应

这个世界的事物经常会很奇怪。当你做了一个出发点很好的决定后&#xff0c;结果未必是向你预期的方向发展&#xff0c;甚至适得其反。作为企业/组织/团队的管理者&#xff0c;经常会在实际管理中&#xff0c;制定了错误的绩效激励办法&#xff0c;使得整体活动走向与初始激励目…

九、二手信息站点后台完成 (IVX 快速开发教程)

九、二手信息站点后台完成 了解完后台实现后&#xff0c;我们开始为该二手商品站点完成完成后台制作。 文章目录九、二手信息站点后台完成9.1.1 完成二手信息站点注册功能9.1.2 完成二手信息站点登录功能9.1.3 完成商品发布功能9.1.4 首页信息获取9.1.5 详情页内容9.1.1 完成二…

Android之自定义带圆角的水纹波效果

1 需求 自定义带圆角的水温波效果 2 代码实现 bg_navigation_ripple.xml <?xml version"1.0" encoding"utf-8"?> <ripple xmlns:android"http://schemas.android.com/apk/res/android"android:color"color/c3"><i…

爬虫是什么?起什么作用?

【爬虫】 如果把互联网比作一张大的蜘蛛网&#xff0c;数据便是放于蜘蛛网的各个节点&#xff0c;而爬虫就是一只小蜘蛛&#xff0c;沿着网络抓取自己得猎物&#xff08;数据&#xff09;。这种解释可能更容易理解&#xff0c;官网的&#xff0c;就是下面这个。 爬虫是一种自动…

根据实例类型反射操作数据库(简单通用表操作类)

这个类适用简单的表 1.有且只有id为主键&#xff0c; 2.并且实例类主键&#xff0c;也就是id应为字段&#xff0c;其他为属性 3.实例类名跟表名一样&#xff0c;字段属性跟列名一样 public class ProType{public int id;public string type{get;set;}public int array{get;set;…

React-引领未来的用户界面开发框架-读书笔记(五)

第11章 性能优化 Reactde Dom diff算法使我们能够在任意时间点高效地重新绘制整个用户界面&#xff0c;并保证最小程度的DOM改变&#xff0c;然而&#xff0c;也存在需要对组件进行细致优化的情况&#xff0c;这时就需要渲染一个新的DOM来让应用运行得更加高效。 shouldCompone…

oneproxy检测主从复制同步延迟

Q:为什么要实现读写分离延迟检测&#xff1f; A:就好比你在ATM机存钱&#xff0c;你老婆收到短信后乐呵呵的拿网银APP查看&#xff0c;结果钱没过来。其实钱已经到账了&#xff0c;只是查询的ATM机节点钱还没过来。所以我们dba要监控数据&#xff0c;一旦发现钱没有复制到另一A…

.NET 分表分库动态化处理

介绍本期主角:ShardingCore 一款ef-core下高性能、轻量级针对分表分库读写分离的解决方案&#xff0c;具有零依赖、零学习成本、零业务代码入侵我不是efcore怎么办这边肯定有小伙伴要问有没有不是efcore的,我这边很确信的和你讲有并且适应所有的ADO.NET包括sqlhelperShardingCo…

addEventListener 的事件函数的传递【转载】

addEventListener 参数如下&#xff1a; addEventListener(type, listener[, useCapture]); type&#xff0c;事件名称listener&#xff0c;事件处理器useCapture&#xff0c;是否捕获一直把 listener 记成是响应函数&#xff0c;function 类型。相信很多人也是这么理解的。多数…

Android之elevation实现阴影效果

1 需求 需要控件实现阴影效果 2 实现 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"andr…

十、小程序实战 (IVX 快速开发教程)

十、小程序实战 使用小程序完成一个二手信息站点与 WebApp 实现流程类型&#xff0c;只是部分内容使用了微信小程序特有的组件&#xff0c;例如微信登录与 WebApp 略有差别&#xff0c;其它逻辑实现较为类似。我们先制作页面&#xff0c;之后再实现功能。 由于之前已经完成了…

【VB测绘程序设计】第一章 VB测绘程序设计概述

目 录 第一节 测绘程序设计的意义 第二节 程序设计语言的发展 第三节 测绘程序设计语言的选择

类属性和实例属性冲突

类属性和实例属性名字冲突怎么办 修改类属性会导致所有实例访问到的类属性全部都受影响&#xff0c;但是&#xff0c;如果在实例变量上修改类属性会发生什么问题呢&#xff1f;class Person(object):address Earthdef __init__(self, name):self.name namep1 Person(Bob) p2…

源代码下载 第六章 注解式控制器详解

2019独角兽企业重金招聘Python工程师标准>>> 源代码请到附件中下载。 其他下载&#xff1a; 跟着开涛学SpringMVC 第一章源代码下载 第二章 Spring MVC入门 源代码下载 Controller接口控制器详解 源代码下载 源码下载——第四章 Controller接口控制器详解——跟着开…

Android6.0到底有什么不一样

在android 6.0&#xff08;API 23&#xff09;中&#xff0c;Google已经移除了移除了Apache HttpClient相关的类 http://developer.android.com/intl/zh-cn/about/versions/marshmallow/android-6.0-changes.html 本文转自屠夫章哥 51CTO博客&#xff0c;原文链接&#xff1a;…

WPF|快速添加新手引导功能(支持MVVM)

阅读导航前言案例一案例二案例三&#xff08;本文介绍的方式&#xff09;如何使用&#xff1f;控件如何开发的&#xff1f;总结1. 前言案例一站长分享过 眾尋 大佬的一篇 WPF 简易新手引导 一文&#xff0c;新手引导的效果挺不错的&#xff0c;如下图&#xff1a;该文给出的代码…

三、界面介绍(IVX快速手册)

三、集成开发环境界面介绍 通过本节你将了解 iVX 在线集成开发环境 界面&#xff0c;快速建立对 在线集成开发环境 的认识。 文章目录三、集成开发环境界面介绍3.1 界面区域3.2 舞台3.3 组件工具栏3.4 对象树/素材面板3.5 属性面板3.6 菜单面板3.7 逻辑工具面板3.8 辅助工具3.…