Origami入门教程2:元素变化(Transition)和动画(Animation)

Origami入门教程2:元素变化(Transition)和动画(Animation)

💡 原文中文,约1100字,阅读约需3分钟。
📝

内容提要

本文介绍了页面切换和页面交互设计的基本概念,包括switch、transition、tap、透明度的patch和animation。通过这些方法可以实现位置、尺寸的变化、状态的切换和动画效果。同时还提到了调整动画效果的方法。

🎯

关键要点

  • 页面切换和交互设计的基本概念包括switch、transition、tap、透明度的patch和animation。
  • transition用于改变位置、尺寸等,需要先添加一个switch来触发变化。
  • 通过tap的patch可以改变透明度,点击图像后透明度降低。
  • 可以通过双击patch标题文本进行重命名,连接tap与switch的flip以切换状态。
  • 添加被switch控制的transition来修改不透明度,默认过渡从0到1可更改为1到0.2。
  • 添加动画需要使用animation patch,常用classic animation和pop animation。
  • classic animation用于添加线性和非线性过渡,适合透明度变化。
  • 可以配置动画的时长和线性样式,调整文本位置通过节点配置。
  • 总结完成了交互模块、状态变化及动画、过渡的制作,可以进行更多动画项目。
➡️

继续阅读