首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SVG创意推文|本文特效动画由全代码运行生成

「小编备用」

今天给大家分享一篇具有视觉创意的交互图文,是「小编备用」于今年4月交付荣耀手机的《光影之美 一瞬倾心》创意推送。

荣耀手机《光影之美 一瞬倾心》

从文章内容上看,该篇以荣耀手机的外观特性作为创意点,结合产品“光影之美”的宣传主题,开篇即具有光影律动般的动画效果有效吸引用户阅读注意。在技术层面上,我们主要基于SVG animation代码变化各元素的数值属性,为多种元素添加色彩变化、运动路径变换等动态效果,呈现具有丝滑流畅、无色差、不卡顿的矢量动画,同时也形象传达产品的认知感受。除此之外,采用SVG animation代码实现快闪动画效果的方式,将时尚潮流与科技感完美融合,添加点击触发内容的简单交互技术,使得图文更具创意性

技术:代码快闪;自动播放动画,快闪动画播放若干秒后,点击触发图文内容

代码快闪产生交替的色彩变化和动画闪烁感,能够吸引用户眼球和保持有效阅读,满足了文章美观性也达到一定的传播效果。「小编备用」基于SVG代码快闪技术,产出优质的商业案

例如下:文思海辉《文思海辉2020期中成绩单发布》

文思海辉《文思海辉2020期中成绩单发布》

技术:SVG animation代码快闪动画;快闪动画自动播放,动画播放若干秒后,点击触发图文高度展开。

总的来说,有效利用SVG技术可以为优质的内容辅以更出色的传播与表达方式,期待「小编备用」给品牌方交付更多有创意的交互图文。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20201130A0EAX700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券