react-native Animated简单动画制作

1、代码

import React from "react";
import { StyleSheet, View, Animated, Image } from "react-native";
class LoopAnimate extends React.Component {constructor(props) {super(props);this.state = {spinVal: new Animated.Value(0),spinVal1: new Animated.Value(0),}}componentDidMount() {this.startAnimate();}//开启动画tartAnimate = () => {const animatedLoop = Animated.sequence([Animated.parallel([Animated.timing(this.state.spinVal, {toValue: 1,duration: 200,delay: 200,useNativeDriver: true})，Animated.timing(this.state.spinVal1, {toValue: 1,duration: 200,delay: 200,useNativeDriver: true})]),Animated.parallel([Animated.timing(this.state.spinVal, {toValue: 0,duration: 200,useNativeDriver: true})，Animated.timing(this.state.spinVal1, {toValue: 0,duration: 200,useNativeDriver: true})])])Animated.loop(animatedLoop).start();}render() {const douone = require('../assets/images/dou1.png');const { spinVal, spinVal1} = this.state;const spinValue = spinVal.interpolate({ // 0、1值转化'20deg'、'0deg'inputRange: [0, 1],outputRange: ['20deg', '0deg']})const spinValue1 = spinVal1.interpolate({inputRange: [0, 1],outputRange: ['20deg', '0deg']})return (<View><Animated.View style={{transform: [{rotate: spinValue}]}}><Image source={douone} style={styles.douImgcss}></Image></Animated.View><Animated.View style={{transform: [{rotate: spinValue1}]}}><Image source={douone} style={styles.douImgcss}></Image></Animated.View></View>)}
}
var styles = StyleSheet.create({douImgcss: {position: "absolute",width: pxToDp(60),height: pxToDp(73),top: pxToDp(-100),resizeMode: 'contain'}
})
export default LoopAnimate;

2、效果

[‘20deg’, ‘0deg’]来回循环摆动

3、animated功能介绍

一、 Animated.sequence循环执行
二、 Animated.parallel 同时开始一个动画数组里的全部动画
三、 Animated.timing 推动一个值按照一个过渡曲线而随时间变化
四、 interpolate转化值例：0、1值转化’20deg’、‘0deg’

react-native Animated简单动画制作相关推荐

使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
React Native开发之动画(Animations)
博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解另外,我 ...
ppt 简单动画制作
ppt 简单动画制作
HTML简单动画制作
HTML简单动画制作(圆移动变色) <!DOCTYPE html> <html lang="en"> <head><meta charse ...
前端知识 | React Native Animated动画浅谈
在移动开发中,动画能有效的提高用户体验.在 React Native 中,也有相应的 API 供我们做动画.这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方 ...
React Native Animated 动画详解 - 实例篇 (这篇就够了)
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例.学习完本篇相信大家对于动画库的基本使用应该是没有问题 ...
React Native Animated动画
在React Native中,我们可以通过两种方式实现一个动画效果: LayoutAnimation Animated 关于LayoutAnimation,我之前写过一篇学习博客(React Nati ...
React Native 实现Lottie动画
Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动 ...
简单动画制作方法，教程在这里！ | 万彩动画大师
说到MG动画制作,最先浮现在脑海的是AE和FLASH.但是,AE和FLASH的难度很大,非专业人士基本上不可能玩转,学习成本很高.那么,有没有简单的.易上手,可以轻松做出拉风MG动画视频的方法? 有, ...

react-native Animated简单动画制作

react-native Animated简单动画制作

1、代码

2、效果

3、animated功能介绍

react-native Animated简单动画制作相关推荐

最新文章

热门文章