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 ...
随机推荐
- 简单的 for 循环也会踩的坑
前言 最近实现某个业务时,需要读取数据然后再异步处理:在 Go 中实现起来自然就比较简单,伪代码如下: list := []*Demo{{"a"}, {"b"} ...
- Certified Adversarial Robustness via Randomized Smoothing
目录 概 主要内容 定理1 代码 Cohen J., Rosenfeld E., Kolter J. Certified Adversarial Robustness via Randomized S ...
- 图片 Augmentation整理
目录 Augmentation Flipping 翻转 Grayscale Equalize 均衡直方图 Posterize 减少颜色通道位数 Cropping Rotation Translatio ...
- Java Web程序设计作业目录(作业笔记)
Java Web程序设计笔记 • [目录] 第1章 Web应用程序 >>> 1.1.3 使用 Eclipse 创建一个静态的登录页面 1.2.5 使用 IE 或Chrome等浏览器, ...
- vue3.0获取地址栏参数
方法一 toRaw(route).query.value 方法二 router.currentRoute.value.query
- 【洛谷】P1067 多项式输出
原题链接:P1067 多项式输出 题目分析:学长推荐的OJ网站 --洛谷,发现挺好用的还可以下载提交出错的数据. 废话就不多说了,这道题属于基础题.提交出错主要是因为一些小细节不到位,这里就不一一赘述 ...
- HIVE优化学习笔记
概述 之前写过关于hive的已经有两篇随笔了,但是作者依然还是一枚小白,现在把那些杂七杂八的总结一下,供以后查阅和总结.今天的文章介绍一下hive的优化.hive是好多公司都在使用的东西,也有好多大公 ...
- HTTP协议层面绕过WAF
最近也是在一直看过waf相关的资料,本次主要是想写写HTTP协议层面过WAF的一些技巧,来与大家一同探讨 原理 给服务器发送payload数据包,使得waf无法识别出payload,当apache,t ...
- GNU C字节对齐__attribute__((aligned(n))) #pragma pack(n)
在阅读gnu软件c源代码时,经常会遇到字节对齐相关操作,比如uboot命令相关的代码中,会遇到__attribute__((aligned(n)))扩展关键字,#pragma pack(n)预处理指令 ...
- MATLAB中回归模型
(1).一元线性回归:数学模型定义 模型参数估计 检验.预测及控制 1.回归模型: 可线性化的一元非线性回归 (2).多元线性回归:数学模型定义 模型参数估计 多元线性回归中检 ...