【译】React Native中的动画渐变

栏目: IOS · Android · 发布时间: 5年前

内容简介:最近做项目时需要实现一个渐变色的背景,真正实现时才发现要比我想象中花费的时间要多。求大佬们点个关注,会定期写原创和翻译国外最新文章,跟大佬们一起学习进步,有问题或者建议欢迎加微信ruiwendelll,拉大家进技术交流群,一起探讨学习,谢谢了!原文地址 这里是

最近做项目时需要实现一个渐变色的背景,真正实现时才发现要比我想象中花费的时间要多。

求大佬们点个关注,会定期写原创和翻译国外最新文章,跟大佬们一起学习进步,有问题或者建议欢迎加微信ruiwendelll,拉大家进技术交流群,一起探讨学习,谢谢了!

原文地址 这里是 源码

天真的尝试

要在React Native中显示渐变,人们使用 react-native-linear-gradient 项目。我想看看是否有人试过动态地改变颜色,我找到了 Animated Gradient Transition 这个项目。仔细查看代码,我的反应是这张的:

【译】React Native中的动画渐变

我不明白为什么它需要两个类,为什么有这么多的代码。我不想花太多时间去理解它了。我觉得我自己的思路就能简单地解决这个问题:

  1. 使用 Animate.createAnimatedComponent 创建一个 AnimatedLinearGradient 组件
  2. 插入某些颜色并传递给 AnimatedLinearGradient

很简单吧? 这里 是源码(会崩溃)。我使用它做了一个demo,然后就得到了error:

JSON value <null> of type NSNull cannot be converted to a UIColor. Did you forget to call processColor() on the JS side?

我求助了twttier,动画不能使用arrays。尽管我觉得我做了正确的事。动画库不会处理任何数组类型的值,所以底层的native组件不会得到动态的颜色。

这就是之前的代码如此庞大的原因。

正确构建

知道了动态化的限制。我们修改一下思路让程序更健壮吧。

  1. 我需要主控件 AnimatedGradientLinearGradient 那样工作。它接收color类型的数组
  2. 在改变colors数组的时候。我们想要一个动画效果。为了实现这个, AnimatedGradient 需要保持对之前colors数组的追踪。
  3. 因为我们不能使用arrays来改变值,我们要建立一个 GradientHelper 来独立地接收颜色数组。然后在 Animated.createAnimatedComponent 中调用它。 GradientHelper 会通过 react-native-linear-gradient 包把array中的值传给 LinearGradient 控件。

为了便于理解,我们假设两种颜色。

AnimatedGradient component

源码

首先,创建一个 AnimatedGradientHelper

【译】React Native中的动画渐变

在AnimatedGradient的构造函数中,我们将以跟踪以前的颜色初始化prevColors状态字段。我们还初始化了一个名为tweener的Animated.Value。

【译】React Native中的动画渐变

在getDerivedStateFromProps中,我们获取state.colors值并保持在state.prevColors中。我们设置了新的state.colors,我们重置了tweener。

【译】React Native中的动画渐变

在componentWillUpdate(也就是当参数改变时),我们将使tweener从0移动到1。

【译】React Native中的动画渐变

在render方法中,我们使用tweener,prevColors和colors来创建两个颜色插值,并将它们分别传递给AnimatedGradientHelper。

【译】React Native中的动画渐变

Gradient Helper

源码

在GradientHelper中,我们所做的就是获取color1和color2参数,将它们放入一个数组中,并将其传递给LinearGradient。我们这样做是因为我们需要绕过Animated的限制。

下面是demo;

【译】React Native中的动画渐变

现在我们知道为什么原始的代码如此之大。它必须做所有这些,并处理超过2种颜色的渐变。

如何动态改变

我们可以增加额外一步为其他属性添加动画。LinearGradient组件允许您指定渐变开始和结束的坐标。为什么不插入那些呢?这是一个更新的渲染方法。您可以猜测组件的其余部分发生了什么。 源码

【译】React Native中的动画渐变

我们只需要通过做一些道具来调整我们的GradientHelper。 代码

【译】React Native中的动画渐变

我们就得到了一个更酷的demo:

【译】React Native中的动画渐变

所以我们知道了如何在RN中实现动态渐变,和一点点动画效果。


以上所述就是小编给大家介绍的《【译】React Native中的动画渐变》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字图像处理

数字图像处理

[美]冈萨雷斯、[美]伍兹 / 电子工业出版社 / 2010-1 / 79.80元

《数字图像处理(第3版)(英文版)》是数字图像处理经典著作,作者在对32个国家的134个院校和研究所的教师、学生及自学者进行广泛调查的基础上编写了第三版。除保留了第二版的大部分主要内容外,还根据收集的建议从13个方面进行了修订,新增400多幅图像、200多个图表和80多道习题,同时融入了近年来本科学领域的重要发展,使《数字图像处理(第3版)(英文版)》具有相当的特色与先进性。全书分为12章,包括绪......一起来看看 《数字图像处理》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具