一个赞同按钮的动效思路整理

截至写完本文标题,依然没有一个最终的方案。

首先这个家伙张这个样子——

QQ20171126-173621

一个白色方框,一个代表赞的红色(#ff425f,暂且说为红色吧)三角,一个白色赞同文本。原本白色方框是有一定透明度的,改成这样我是有些不赞同的,不过今天的内容不是评论这个按钮是否会失去哪些焦点或者内间距如何如何,这里都只是从网站上随便截个图了,所以应标题而言,下面要说的让这个按钮以哪形式种动起来。

普通形式的话,是白色边框和三角消失,stroke变fill,赞同文字变为已赞同。

以元素位置方向考虑的话,思路为:

  • 白色边框 → 红色实心
  • 三角形 → transparent
  • 赞同 → 已赞同

以元素颜色方向考虑的话,思路则为:

  • 白色边框 → transparent
  • 红色三角形 → 红色实心
  • 赞同 → 已赞同

或者

  • 白色边框 → 已
  • 红色三角 → 红色实心
  • 赞同 不变

以①来说的话大部分动效元素可能集中在【白色边框 → 红色实心】这一比较明显的变化上,这些元素可能不拘泥于原有边框本身,比如像twitter或者medium clips的烟花放射动效,但那些放射性行为需要依从于原本圆形的结构,这里作为一个矩形不应轻易套用。

而从①思路衍生出的③中的红色【三角 → 已】看起来更是有些荒诞,这里面蕴含的变化因素过多,比如fill → stroke型,锚点与边数也增加了许多,在这上边讨论如何使路径变化的自然实在不明智。

那么这个「已」字的凭空出现似乎要成为定音,但出现的方式似乎并没有一个准确的方式,老早之前(大概一年前)做过一个赞同按钮的切换:

合成-1_1

这种是已经把「已赞同」的hover状态「取消赞同」所表示出来了,全部的元素都依靠位移与透明度的变化而产生变化,当然这可能也是最普通的但也是比较稳定的一种。我不想看到一个「已」字上蹿下跳,又是变形又是绕圈,「已」并不是一个规则图形,它的复杂运动只会看起来更「写实」,而不是MG那种跃动感。

我们先放下「已」字再来看②的情况,即【红色三角 → 红色实心】如下图:

zan-2-cchanged@2x

这个也是之前做的,这里使用的是给予三角形多一个锚点做四边形变换,复制这种效果然后换以其他颜色并做时间和角度上的offset即可。你可能已经注意到图中多了两种颜色,「黄色」代表网站的游戏评分,蓝色代表用的标记的玩过游戏时长,这两项指标是整个网站最基本最普遍的用户数据视觉color sign,而这两种颜色由于其适用性也经常用于其他promote图中。

zan-changed@2x

这张gif原本是想有一种三角碎片散开的效果但做的并不是那么理想,可能是particular随机的效果不太好,不如做的规则一点。

zan1(已转换)

这种变换则是做的更整体一些,同时加入了比较明显的缩放效果。可能三角形刚刚变形的时刻有点奇怪。

3d-tri

当然,立体角度也不是没考虑过,比较在c4d里随便用角锥试了试,如上图。

除此之外,只是一个三角形的变换就有很多种,比如可以上浮然后落下溶解、左右漂移什么的,但是这些动画持续时间都比较长,如果较快这些动画的效率便又是一大难题。而像已有的「动效周期表」中那些基础的东西又让人不太肯定,所以在这些东西抉择也是需要更多思考的。作为一个三元素集体变化的轻量级动效,实则其路漫漫。

一个有关“一个赞同按钮的动效思路整理”的想法

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s