第一个案例: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 动画案例介绍的更多相关文章

  1. React之动画实现

    React之动画实现 一,介绍与需求 1.1,介绍 1,Ant Motion Ant Motion能够快速在 React 框架中使用动画.在 React 框架下,只需要一段简单的代码就可以实现动画效果 ...

  2. Android动画之旅-Android动画基本介绍

    在上一篇博客中.我们简单了解了在Android中的动画特效.小伙伴们是不是意犹未尽呀. 还没有看的猛戳这里:Android动画之旅一开篇动画简单介绍 本篇博客.将和大家一起来分析Android中的四大 ...

  3. iOS核心动画以及UIView动画的介绍

    我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些 ...

  4. React 附件动画API ReactCSSTransitionGroup

    React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...

  5. 3星|《AI极简经济学》:AI的预测、决策、战略等方面的应用案例介绍

    AI极简经济学 主要内容是AI的各种应用案例介绍.作者把这些案例分到五个部分介绍:预测.决策.工具.战略.社会. 看书名和介绍以为会从经济学的角度解读AI,有更多的新鲜的视角和观点,读后比较失望,基本 ...

  6. 转 PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)

    PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)   通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个 ...

  7. Lucene3.6.2包介绍,第一个Lucene案例介绍,查看索引信息的工具lukeall介绍,Luke查看的索引库内容,索引查找过程

    2.Lucene3.6.2包介绍,第一个Lucene案例介绍,查看索引信息的工具lukeall介绍,Luke查看的索引库内容,索引查找过程 2014-12-07 23:39 2623人阅读 评论(0) ...

  8. SQL Delta实用案例介绍,很好的东西,帮了我不少忙

    SQL Delta实用案例介绍 概述 本篇文章主要介绍SQL DELTA的简单使用.为了能够更加明了的说明其功能,本文将通过实际项目中的案例加以介绍. 主要容 Ÿ   SQL DELTA 简介 Ÿ   ...

  9. <react> 组件的详细介绍:

    <react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...

随机推荐

  1. 简单的 for 循环也会踩的坑

    前言 最近实现某个业务时,需要读取数据然后再异步处理:在 Go 中实现起来自然就比较简单,伪代码如下: list := []*Demo{{"a"}, {"b"} ...

  2. Certified Adversarial Robustness via Randomized Smoothing

    目录 概 主要内容 定理1 代码 Cohen J., Rosenfeld E., Kolter J. Certified Adversarial Robustness via Randomized S ...

  3. 图片 Augmentation整理

    目录 Augmentation Flipping 翻转 Grayscale Equalize 均衡直方图 Posterize 减少颜色通道位数 Cropping Rotation Translatio ...

  4. Java Web程序设计作业目录(作业笔记)

    Java Web程序设计笔记 • [目录] 第1章 Web应用程序 >>> 1.1.3 使用 Eclipse 创建一个静态的登录页面 1.2.5 使用 IE 或Chrome等浏览器, ...

  5. vue3.0获取地址栏参数

    方法一 toRaw(route).query.value 方法二 router.currentRoute.value.query

  6. 【洛谷】P1067 多项式输出

    原题链接:P1067 多项式输出 题目分析:学长推荐的OJ网站 --洛谷,发现挺好用的还可以下载提交出错的数据. 废话就不多说了,这道题属于基础题.提交出错主要是因为一些小细节不到位,这里就不一一赘述 ...

  7. HIVE优化学习笔记

    概述 之前写过关于hive的已经有两篇随笔了,但是作者依然还是一枚小白,现在把那些杂七杂八的总结一下,供以后查阅和总结.今天的文章介绍一下hive的优化.hive是好多公司都在使用的东西,也有好多大公 ...

  8. HTTP协议层面绕过WAF

    最近也是在一直看过waf相关的资料,本次主要是想写写HTTP协议层面过WAF的一些技巧,来与大家一同探讨 原理 给服务器发送payload数据包,使得waf无法识别出payload,当apache,t ...

  9. GNU C字节对齐__attribute__((aligned(n))) #pragma pack(n)

    在阅读gnu软件c源代码时,经常会遇到字节对齐相关操作,比如uboot命令相关的代码中,会遇到__attribute__((aligned(n)))扩展关键字,#pragma pack(n)预处理指令 ...

  10. MATLAB中回归模型

    (1).一元线性回归:数学模型定义      模型参数估计   检验.预测及控制 1.回归模型:   可线性化的一元非线性回归    (2).多元线性回归:数学模型定义 模型参数估计 多元线性回归中检 ...