react-motion 动画案例介绍
第一个案例:Motion组件
import React,{Component} from 'react';
import {Motion,spring,presets} from 'react-motion';
import './motion.css'; class ReactMotion extends Component{
constructor(props){
super(props);
this.state={
left:0
}
}
clickHandler=()=>{
let targetX=0;
if(this.state.left===0){
targetX=200;
}else{
targetX=0;
}
this.setState({
left:targetX
})
}
componentDidMount=()=>{
this.clickHandler();
}
render(){
return(
<div className="container">
<Motion style={{x:spring(this.state.left,presets.wobbly)}}>
{
//关键: interpolatingStyle===style
interpolatingStyle=>{
return(
<div
style={{transform:`translateX(${interpolatingStyle.x}px)`}}
className='box'
></div>
)
}
} </Motion>
<button onClick={this.clickHandler}>run</button> </div>
)
}
} export default ReactMotion;
三个组件共用CSS:
.box{
width: 100px;
height: 100px;
background-color: #000;
}
.box2{
width: 100px;
height: 100px;
background-color: #000;
float:left;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
}
第二个案例:StargeredMotionCom
import React, { Component } from 'react';
import { StaggeredMotion, spring, presets } from 'react-motion';
import '../ReactMotion/motion.css';
// 用StaggeredMotion 实现一个联动动画
class StargeredMotionCom extends Component {
constructor(props) {
super(props);
this.state = {
length: 10
}
}
addLength = () => {
let newLength;
if (this.state.length) {
newLength = 0;
} else {
newLength = 10;
}
this.setState({
length: newLength
})
}
render() {
let boxes = [];
for (let i = 0, len = this.state.length; i < len; i++) {
boxes.push({ scale: 0 })
}
return (
<React.Fragment>
<div>
{this.state.length > 0 ? (
<StaggeredMotion defaultStyles={boxes} styles={prevStyles => {
console.log(prevStyles,'prevStyles')
return prevStyles.map((item, i) => i === 0?{scale: spring(1, { ...presets.noWobble })}:prevStyles[i - 1])}}
>
{interpolatingStyles =>{
console.log(interpolatingStyles,'interpolatingStyles')
return<div>
{interpolatingStyles.map((item, i) => {
return (
<div className="box2" key={i} style={{transform: `scale(${item.scale}, ${item.scale})`}}></div>)})
}
</div>
} }
</StaggeredMotion>
) : null}
</div>
<button onClick={this.addLength}>run</button>
</React.Fragment>
)
}
}
export default StargeredMotionCom;
第三个案例:TransitionMotion
import React, { Component } from 'react';
import { TransitionMotion, spring } from 'react-motion';
import '../ReactMotion/motion.css'; class TransitionMo extends Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
componentDidMount = () => {
this.setState({
show: false
})
}
clickHandler = () => {
this.setState({
show: !this.state.show
})
}
willEnter = styleThatEnter => {
return { scale: 0 }
} willLeave = styleThatLeft => {
return { scale: spring(0) }
}
render() {
return (
<div>
<button onClick={this.clickHandler}>run</button>
{/* style===inStyles */}
<TransitionMotion styles={this.state.show ? [{ key: 'test', style: { scale: spring(1) } }] : []}
willEnter={this.willEnter}
willLeave={this.willLeave}>
{inStyles => (
inStyles[0] ? (
<div className="box3"
key={inStyles[0].key}
style={{
transform: `scale(${inStyles[0].style.scale},${inStyles[0].style.scale})`
}}></div>
) : null
)}
</TransitionMotion> </div>
);
}
} export default TransitionMo;
以上是react-motion中的三个组件案例的实现
react-motion 动画案例介绍的更多相关文章
- React之动画实现
React之动画实现 一,介绍与需求 1.1,介绍 1,Ant Motion Ant Motion能够快速在 React 框架中使用动画.在 React 框架下,只需要一段简单的代码就可以实现动画效果 ...
- Android动画之旅-Android动画基本介绍
在上一篇博客中.我们简单了解了在Android中的动画特效.小伙伴们是不是意犹未尽呀. 还没有看的猛戳这里:Android动画之旅一开篇动画简单介绍 本篇博客.将和大家一起来分析Android中的四大 ...
- iOS核心动画以及UIView动画的介绍
我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些 ...
- React 附件动画API ReactCSSTransitionGroup
React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...
- 3星|《AI极简经济学》:AI的预测、决策、战略等方面的应用案例介绍
AI极简经济学 主要内容是AI的各种应用案例介绍.作者把这些案例分到五个部分介绍:预测.决策.工具.战略.社会. 看书名和介绍以为会从经济学的角度解读AI,有更多的新鲜的视角和观点,读后比较失望,基本 ...
- 转 PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据) 通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个 ...
- Lucene3.6.2包介绍,第一个Lucene案例介绍,查看索引信息的工具lukeall介绍,Luke查看的索引库内容,索引查找过程
2.Lucene3.6.2包介绍,第一个Lucene案例介绍,查看索引信息的工具lukeall介绍,Luke查看的索引库内容,索引查找过程 2014-12-07 23:39 2623人阅读 评论(0) ...
- SQL Delta实用案例介绍,很好的东西,帮了我不少忙
SQL Delta实用案例介绍 概述 本篇文章主要介绍SQL DELTA的简单使用.为了能够更加明了的说明其功能,本文将通过实际项目中的案例加以介绍. 主要容 SQL DELTA 简介 ...
- <react> 组件的详细介绍:
<react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...
随机推荐
- 「实用」打造自我感觉非常漂亮的Mac终端
背景 (今天我是一个美妆博主) 突然发现自己使用的iterm2终端样式有些朴素,为了让她看起来花枝招展的,我决定给她打扮打扮.毕竟每天面对她的时间比对象还多-- 效果对比 因为每个人的喜好都不一样,所 ...
- 源码分析 SpringCloud 2020.0.4 版本 EurekaClient 的注册过程
1. 概述 老话说的好:要善于思考,有创新意识. 言归正传,之前聊了 Springboot 的启动过程,今天来聊聊 Eureka Client 的注册过程. 2. Eureka Client 的注册过 ...
- vue递归过滤树结构数组
let arr=[{ title:'1', key:'1', type:0, children:[{ title:'1-1', key:'1-1', type:0, }] },{ title:'2', ...
- [opencv]KAZE、AKAZE特征检测、匹配与对象查找
AkAZE是KAZE的加速版 与SIFT,SUFR比较: 1.更加稳定 2.非线性尺度空间 3.AKAZE速度更加快 4.比较新的算法,只有Opencv新的版本才可以用 AKAZE局部匹配介绍 1.A ...
- Java初学者作业——添加程序断点,以Debug模式运行程序,观察变量的交换
返回本章节 返回作业目录 需求说明: 定义两个变量,分别用于存储学生的语文成绩和数学成绩,通过程序将这两个变量的值进行交换,输出变量之前的值和交换后变量中的值. 添加断点,观察变量值的交换过程. 实现 ...
- Android程序设计基础 • 【第1章 Android程序入门】
全部章节 >>>> 本章目录 1.1 Android 平台介绍 1.1.1 Android 简介 1.1.2 Android 平台的发展 1.1.3 Android 平台架 ...
- 《MySQL数据操作与查询》- 返校复习课练习题,创建数据库user_system,创建数据表user及user_ext
一.其它(共18题,100分) 1.创建数据库user_system CREATE DATABASE user_system 2.在数据库user_system中创建数据表user及user_ext, ...
- .Net Core 3.1 WebApi发布到IIS
安装.Net Core 3.1 运行时环境 1.官网地址https://dotnet.microsoft.com/download/dotnet,选择要下载的运行时版本(.Net Core 3.1), ...
- MongoDB应用场景及选型
1. MongoDB数据库定位 * OLTP数据库 * 原则上Oracle和MySQL能做得事情,MongoDB都能做(包括ACID事务) * 优点:横向扩展能力,数据量或并发量增加时候可以自动扩展 ...
- 使用 SSH 隧道实现端口转发、SOCKS 代理
SSH隧道 本地端口转发 本地客户端通过 local_port 连接到 MobaXterm: MobaXterm 绕过防火墙,使用 user 用户连接到 ssh_server_ip:ssh_serve ...