Skip to content

Animated

Jump to bottom
ImVeryGood edited this page Mar 12, 2019 · 16 revisions 
                      #  Animated动画

Animated使得我们可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入与输出，通常只需要关注设置动画的开始和结束即可，在其中建立一个可配置的变化函数，然后使用start/stop方法来控制动画按顺序执行。

基本使用：

基本Animated动画的步骤

  1. 使用Animated.Value设定一个或多个初始值，包括透明度、位置等。
  2. 使用基本的Animated封装的组件，如Animated.View、Animated.Text、Animated.Image和Animated.ScrollView。
  3. 将初始值绑定到动画目标属性上。
  4. 通过Animated.timeing等方法设定动画参数。
  5. 调用start控制动画的启动。

值类型

  • Animated.Value()用于单个值
  • Animated.ValueXY()用于矢量值

动画类型：

*1.Spring

Spring从名字中不难看出是弹性弹簧的意思，也就是我们可以使用Spring这个动画来实现一些弹性的动画效果

属性介绍：

1.1.friction-摩擦力

1.2.tension-张力

张力，物理学名词。物体受到拉力作用时，存在于其内部而垂直于两邻部分接触面上的相互牵引力从物理字面量看，张力越大，方块被拉回的速度也就越快。

1.3.bounciness - 抖

bounciness的值越大，这个滑块被拉回来是抖的就越厉害.

1.4.speed - 速度

speed值越大说明摩擦力就越小，回弹速度就越快，而且speed是可以和上面的“抖”bounciness一块设置

1.5.stiffness - 刚度

刚度指材料或结构在受力时抵抗弹性变形的能力。通过这个解释我们不难看出，刚度越大，说明弹簧越不容易变形，越不容易变形的情况下，如果拉伸后就越快的恢复原形。对于这个刚度可以简单的理解为弹簧的刚度越好，那么这个弹簧的弹性就越好.

1.6.damping - 阻尼

阻尼(damping) 的物理意义是力的衰减,或物体在运动中的能量耗散。通俗地讲，就是阻止物体继续运动。当物体受到外力作用而振动时,会产生一种使外力衰减的反力,称为阻尼力(或减震力) 。换句话说，阻尼就是“减震”，作用就是用来防止物体来回抖动的，这个与上面聊的那个“抖” - bounciness 正好相反。阻尼越大，物体在运动过程中就越不抖，越小就抖的厉害。

阻尼的值必须大于零，而且阻尼可以与上面的刚度- stiffness 一块设置。两个阻尼相同，刚度越大抖的越厉害。

1.7.mass - 质量

物体的质量越大，惯性越大。同样一根弹簧，质量越大就抖的越厉害

1.8.delay - 延迟

动画延时执行

*2.decay

带有加速度值的动画，类似于正弦值

属性介绍：

2.1.velocity-初始速度

必须要填写

2.2.deceleration-速度减小的比例

加速度。默认为0.997

*3.timing

带有时间的渐变动画

属性介绍：

3.1. duration-设置动画持续的时间(单位为毫秒)

默认为500ms.

3.2. easing-动画效果的函数

3.3. delay- 动画执行延迟时间(单位:毫秒)

默认为0ms.

组合动画：

有关属性：

  • parallel（同时执行）

  • sequence（顺序执行）

  • stagger（错峰，其实就是插入了delay的parrllel）

  • delay（延迟）

    `Animated.sequence([]);`

合成动画值

我们可以使用加乘除以及取余等运算来把两个动画值合成为一个新的动画值。

  • Animated.add():将两个动画值相加计算，得出一个新的动画值。
  • Animated.divide():将两个动画值相除计算，得出一个新的动画值。
  • Animated.modulo()：将两个动画值做取模（取余数）计算，得出一个新的动画值。
  • Animated.multiply()；将两个动画值相乘计算，得出一个新的动画值。

举个官网的例子，转换缩放比例（2X—>0.5X）：

 const a = new Animated.Value(1);
 const b = Animated.divide(1, a);

 Animated.spring(a, {
   toValue: 2,
 }).start();

相关补充：

插值函数interpolate

在transform的使用示例中使用了interpolate插值函数。这个函数实现了数值大小、单位的映射转换，允许一个输入的区间范围映射到另外一个输入的区间范围。比如：将0-1数值转换为0deg-360deg角度，旋转View时：

this.state.rotateValue.interpolate({ // 旋转，使用插值函数做值映射
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
  })

Easing函数

上边配置中easing用来设置一个Easing函数类型，它的作用是来设置我们要动画改变的value要以什么状态来改变，是加速改变，还是减速改变，还是是弹性改变等等！

相关文档：Easing

不同属性多对应的曲线以及效果图：Easing曲线图

代码示例：

`

import React, { Component } from "react";
import { StyleSheet, Animated, Easing, Image } from "react-native";

export class AnimtedUi extends Component {
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      bounceValue: new Animated.Value(0),
      rotateValue: new Animated.Value(0),
      translateValue: new Animated.ValueXY({ x: 0, y: 0 }), // 二维坐标
      fadeOutOpacity: new Animated.Value(0)
    };
  }

  render() {
    return (
      <Animated.View // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          transform: [
            // scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ
            { scale: this.state.bounceValue }, // 缩放
            {
             rotate: this.state.rotateValue.interpolate({
                // 旋转，使用插值函数做值映射
                inputRange: [0, 1],
                outputRange: ["0deg", "360deg"]
              })
            },
            { translateX: this.state.translateValue.x }, // x轴移动
            { translateY: this.state.translateValue.y } // y轴移动
          ],
          opacity: this.state.fadeOutOpacity // 透明度
        }}
     
        <Image
          source={{ uri: "http://i.imgur.com/XMKOH81.jpg" }}
          style={{ width: 400, height: 400 }}
        />
      </Animated.View>
    );
  }

  startAnimation() {
    this.state.bounceValue.setValue(1.5); // 设置一个较大的初始值
    this.state.rotateValue.setValue(0);
    this.state.translateValue.setValue({ x: 0, y: 0 });
    this.state.fadeOutOpacity.setValue(1);

    Animated.sequence([
      Animated.sequence([
        //  组合动画 parallel（同时执行）、sequence（顺序执行）、stagger（错峰，其实就是插入了delay的parrllel）和delay（延迟）
        Animated.spring(
          //  基础的单次弹跳物理模型
          this.state.bounceValue,
          {
            toValue: 0.8,
            friction: 1, // 摩擦力，默认为7.
            tension: 40 // 张力，默认40。
          }
        ),
        Animated.delay(2000), // 配合sequence，延迟2秒
        Animated.timing(
          // 从时间范围映射到渐变的值。
          this.state.rotateValue,
          {
            toValue: 1,
            duration: 800, // 动画持续的时间（单位是毫秒），默认为500
            easing: Easing.out(Easing.quad), // 一个用于定义曲线的渐变函数
            delay: 0 // 在一段时间之后开始动画（单位是毫秒），默认为0。
          }
        ),
        Animated.decay(
          // 以一个初始速度开始并且逐渐减慢停止。  S=vt-（at^2）/2   v=v - at
          this.state.translateValue,
          {
            velocity: 10, // 起始速度，必填参数。
            deceleration: 0.8 // 速度衰减比例，默认为0.997。
          }
        )
      ]),
      Animated.timing(this.state.fadeOutOpacity, {
        toValue: 0,
        duration: 2000,
        easing: Easing.linear // 线性的渐变函数
      })
    ]).start(() => this.startAnimation()); // 循环执行动画

    // 监听值的变化
    this.state.rotateValue.addListener(state => {
      console.log("rotateValue=>" + state.value);
    });

    // ValueXY
    this.state.translateValue.addListener(value => {
      console.log("translateValue=>x:" + value.x + " y:" + value.y);
    });

    this.state.fadeOutOpacity.addListener(state => {
      console.log("fadeOutOpacity=>" + state.value);
    });
  }

  componentDidMount() {
    this.startAnimation();
  }
}

const styles = StyleSheet.create({});

` 效果图： animated图

demo地址：AnimatedDemo

Clone this wiki locally