ios 圆形旋转菜单_使用Figma智能动画制作iOS动效

Oct 7  阅读时长约6分钟 

作者:Lucas Chae

翻译:桃几、高蓝光、任可欣、贝壳里睡着鱼

审校:陶陶然


Figma刚刚发布了两个期待已久的新功能:智能动画和拖拽交互。我通过创建5个iOS动效来进行测试。

746891254087a65d84ade7dd6b56b058.gif

使用Figma智能动画创建的人脸识别动效

今年年初,我开始使用Figma作为制作原型的主要工具。尽管我对它非常满意,但我始终感觉少点什么——它没法脱离插件或第三方应用而高效地实现简单的可视化的微交互。

所以智能动画和拖拽交互功能一经推出,我就开始上手使用了。我试着只使用Figma(完全不用Flinto或Principle)制作了5个iOS动效来测试这两个功能的潜力。

1.勿扰模式(开/关)

 ✅ 支持:简单形状的颜色、大小和位置的动效。

 ❌ 不支持:复杂/布尔形状的动效。

无法实现布尔形状的动效

a63ed8aa1479eaf8dce758dc90d3874f.png

一开始,我通过布尔运算制作了一个新月形状,这样背景的颜色渐变可以不被遮挡住而正常显示。从上图来看,应该是Ellipse(main)减去Ellipse(subtract)。但是,当我设置这个布尔形状的动效时,发生了这种情况:

caa0710a193c273bcd3d3ebb6a6e8a31.gif

智能计算显然出bug了

智能动画的一个新功能是可以高亮强调不同画板上的同一个元件。Figma产品设计师Nikolas Klein的解释是,“这个功能将所有可以进行智能动效过渡的元件高亮显示出来“。

af6765975c15e3bc5b1967513f5bebd9.gif</

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值