当前位置: 首页 > 工具软件 > Ant Motion > 使用案例 >

关于AntMotion动画使用

郎曜文
2023-12-01

安装

 cnpm install rc-queue-anim --save

使用 TweenOne

闪烁效果

import TweenOne from 'rc-tween-one';

 <TweenOne
   repeat={-1}
   animation={[ 
   { opacity: 1, duration: 750, ease: 'linear' },  //750毫秒显示
   { opacity: 0, duration: 750, ease: 'linear' },  //750毫秒不显示
  ]}
   style={{ opacity: 0 }}
   className={styles.d_gf_light}
  >
  <img className={styles.d_gf_light_s} src={D_gf_light} alt="" />
  </TweenOne>

旋转效果

 <TweenOne
  repeat={-1} //repeat为-1无限进行
  animation={{ rotate: 360, duration: 3000, ease: 'linear' }} //rotate360度旋转,duration时间
  className={styles.d_fj_s}
 >
 <img className={styles.d_fj_s} src={D_fj_s} alt="" />
</TweenOne>
 类似资料: