React-Native中Animate动画使用方法汇总整理（六）之缩放的实现

写作时间：2021/9/24
React-Native版本：0.63.2
目标平台：iOS（安卓平台尚未检测）

整理的进度已经过半了，这种工作确实是非常的枯燥，坚持做完吧

本篇是RN动画组件使用方式整理的第6篇，重点对缩放的实现进行整理介绍，上一篇简单对sequence和parallel进行了梳理，实际上通过parallel也实现了缩放效果，原理是同时改变视图的宽高，但是本篇采用了另外一种方式来实现类似的效果，先看最终的展示

和上一篇动态改变宽高有所不同，该案例当中的缩放是通过控制transform中的scale属性来实现的

完整代码如下

//App.js
'use strict';import React from 'react';
import AnimatedTest from './demos/demo_2/AnimatedTest';export default class App extends React.Component {render() {return (<AnimatedTest />);}
}

//AnimatedTest.js
'use strict';import React from 'react';
import { SafeAreaView } from 'react-native';
import Ani_6 from './Ani_6';export default class AnimatedTest extends React.Component {render() {return (<SafeAreaView><Ani_6 /></SafeAreaView>);}
}

//Ani_6.js
'use strict';import React from 'react';
import {StyleSheet, SafeAreaView, Button, Animated} from 'react-native';export default class Ani_6 extends React.Component {constructor() {super();this.state = {scale_1: new Animated.Value(0),scale_2: new Animated.Value(0),};}render() {return (<SafeAreaView><Button title={'Start'} onPress={this.startAni} /><Animated.View style={[{transform: [{scale: this.state.scale_1}]}, styles.Ani]} /><Animated.View style={[{transform: [{scale: this.state.scale_2}]}, styles.Ani]} /></SafeAreaView>);}startAni = () => {Animated.timing(this.state.scale_1, {toValue: 1,duration: 5000,useNativeDriver: true,}).start();Animated.spring(this.state.scale_2, {toValue: 1,friction: 2,useNativeDriver: true,}).start();};
}const styles = StyleSheet.create({Ani: {width: 300,height: 300,backgroundColor: 'cyan',},
});

需要注意的是，虽然动画动态改变了scale的数值，但是视图的宽高始终没有改变，或者说视图的占位始终是存在的，不会因为它的scale变化导致视图大小发生改变，这一点和上篇中动态改变宽高的动画效果是不同的

下篇会对动画的循环播放实现方法进行整理

React-Native中Animate动画使用方法汇总整理（六）之缩放的实现相关推荐

React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换
React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换写作时间:2021/9/23 React-Native版本:0.63.2 目标平台: ...
React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现
React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现写作时间:2021/9/23 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) RN ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...
理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...

React-Native中Animate动画使用方法汇总整理（六）之缩放的实现

React-Native中Animate动画使用方法汇总整理（六）之缩放的实现相关推荐

最新文章

热门文章