admin 管理员组

文章数量: 894082

Taro 动画 之放大缩小

直接上效果

taro 动画

代码:

scss:
.margin50 {margin-bottom: 50px;
}
.container {width: 100%;height: 100%;
}.tips {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: 2000;display: flex;justify-content: center;align-items: center;
}
.box {opacity: 0;width: 620px;background: #fff;padding: 35px;border-radius: 30px;box-sizing: border-box;
}
.title {font-size: 34px;color: #333;font-weight: bold;text-align: center;margin-bottom: 20px;
}
.content {color: #666;font-size: 28px;line-height: 42px;
}
.btn {width: 430px;height: 80px;line-height: 80px;text-align: center;color: #fff;font-size: 30px;border-radius: 40px;background: #F8AF18;margin: 35px auto 0;
}
tsx:
import Taro , { Component } from '@tarojs/taro';
import { View, Button, Input } from '@tarojs/components';
import './animation.scss'export default class InvoiceOpen extends Component<any, any> {state = {cate: false, // 判断是否显示 动画分类define: false, // 判断是否显示 动画的概念animationData: {}}duration: number = 300moving: boolean = falseanimation: any = Taro.createAnimation({duration: this.duration,timingFunction: 'ease'})showTips() {this.animation.opacity(0).scale(0.01).step({duration: 32,timingFunction: 'step-start',})this.animation.opacity(1).scale(1).step({duration: this.duration,timingFunction: 'ease',})this.setState({animationData: this.animation.export()},() => {setTimeout(() => {this.moving = false}, this.duration)})}hideTips(cb) {this.moving = truethis.animation.scale(0.01).step({duration: this.duration,timingFunction: 'ease',})this.animation.opacity(0).step({duration: 32,timingFunction: 'step-start',})this.setState({animationData: this.animation.export()},() => {setTimeout(() => {this.moving = falsecb && cb()}, this.duration)})}// 发票须知 显示、隐藏showInvoiceTips() {this.moving = truethis.setState({cate: true}, () =>{this.showTips()})}hideInvoiceTips() {if (this.moving) returnthis.hideTips(() => {this.setState({cate: false})})}// 发票税号说明 显示、隐藏showTaxTips() {this.moving = truethis.setState({define: true}, () =>{this.showTips()})}hideTaxTips() {if (this.moving) returnthis.hideTips(() => {this.setState({define: false})})}render() {return (<View><View className="container"><Button className="margin50" onClick={this.showTaxTips}>动画的概念</Button><Button onClick={this.showInvoiceTips}>动画分类</Button>// 没有 input 会出问题,具体原因不明<Input/></View>{/* 动画分类 */}{this.state.cate && <View className="tips"><View className="box" onClick={e => e.stopPropagation()} animation={this.state.animationData}><View className="title">动画分类</View><View className="content"><View>按工艺技术分为:平面手绘动画、立体拍摄动画、虚拟生成动画、真人结合动画;</View><View>按传播媒介分为:影院动画、电视动画、广告动画、科教动画;</View><View>按动画性质分为:商业动画、实验动画。</View></View><Button className="btn" onClick={this.hideInvoiceTips}>我知道了</Button></View></View>}{/* 动画的概念 */}{ this.state.define && <View className="tips"><View className="box" onClick={e => e.stopPropagation()} animation={this.state.animationData}><View className="title">动画的概念</View><View className="content">动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。最早发源于19世纪上半叶的英国,兴盛于美国,中国动画起源于20世纪20年代。动画是一门年轻的艺术,它是唯一有确定诞生日期的一门艺术,1892年10月28日埃米尔·雷诺首次在巴黎著名的葛莱凡蜡像馆向观众放映光学影戏,标志着动画的正式诞生,同时埃米尔·雷诺也被誉为“动画之父”。动画艺术经过了100多年的发展,已经有了较为完善的理论体系和产业体系,并以其独特的艺术魅力深受人们的喜爱。</View><Button className="btn" onClick={this.hideTaxTips}>我知道了</Button></View></View>}</View>);}
}

这段代码中有一个 input 标签,当注释或者 不存在时,动画会出现 bug,具体原因不知,希望有大佬可以解答。
bug效果如下:

taro 动画 之bug

本文标签: Taro 动画 之放大缩小