第一个案例: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. 【感悟】观《BBC彩色二战纪录片》有感

    2020年7月2日到3日我看了纪录片,以下是我的一些感悟 1.作为进攻者,无论大事还是小事都需要一鼓作气做完,以免留给对手喘息的机会.(指:未消灭) 2.作为防守者,要有顽强抵抗的精神,但要保留撤退的 ...

  2. Redisson分布式锁学习总结:可重入锁 RedissonLock#lock 获取锁源码分析

    原文:Redisson分布式锁学习总结:可重入锁 RedissonLock#lock 获取锁源码分析 一.RedissonLock#lock 源码分析 1.根据锁key计算出 slot,一个slot对 ...

  3. nssm常用命令(在Windows系统下安装服务的工具)

    nssm install servername //创建servername服务 nssm start servername //启动服务 nssm stop servername //暂停服务 ns ...

  4. Hive on Spark和Spark sql on Hive,你能分的清楚么

    摘要:结构上Hive On Spark和SparkSQL都是一个翻译层,把一个SQL翻译成分布式可执行的Spark程序. 本文分享自华为云社区<Hive on Spark和Spark sql o ...

  5. 《手把手教你》系列技巧篇(五十四)-java+ selenium自动化测试-上传文件-中篇(详细教程)

    1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...

  6. CAP原理详解

    转载 https://blog.csdn.net/u013332124/article/details/82874178 文章目录 一.CAP原理介绍 对CAP原理的一些常见的理解误区 二.CAP原理 ...

  7. [Flask] 安装virtualenv时候出现的问题

    1.HTTPError: 404 Client Error: Not Found for url: ...的错误 ubuntu@VM-0-6-ubuntu:~/myprojects$ virtuale ...

  8. Linux内核模块学习

    注:本文是<Linux设备驱动开发详解:基于最新的Linux 4.0内核 by 宋宝华 >一书学习的笔记,大部分内容为书籍中的内容. 书籍可直接在微信读书中查看:Linux设备驱动开发详解 ...

  9. 离线环境安装使用 Ansible

    之前写了一篇介绍 Ansible 的文章 ,今天回顾看来写的有些匆忙,一些具体的操作步骤都没有讲明白,不利于读者复现学习.最近又申请了一个几百台机器的环境,正好借此机会把如何在离线环境中使用 Ansi ...

  10. SSTI(以Twig模板引擎为例)

    一.模板注入与常见Web注入 就注入类型的漏洞来说,常见 Web 注入有:SQL 注入,XSS 注入,XPATH 注入,XML 注入,代码注入,命令注入等等.注入漏洞的实质是服务端接受了用户的输入,未 ...