前端 - 视觉呈现技术

前言

不知道大家有没有在微信中看见过，那种特别炫酷的h5，从事前端工作的伙伴看着这么炫酷的效果，又不知如何实现。本文就带你走进前端高阶视觉特效。

特效

视觉呈现做的最熟的，我觉得应是视频了，每个视频工具都能根据现有的素材和网上找素材快捷实现十分炫酷的效果。但是视频导出的通常是视频格式如mp4等格式文件。mp4这类文件在微信H5中永远治愈最上层，我们无法在视频的上方添加遮罩层并对视频制作相关的处理。
那么，我们怎么来制作符合前端要求，可交互式的视频呢？

PAG

官网：https://pag.art/
这是一个AE的插件，使用AE视频制作工具在导出内容时，我们通过PAG这个插件可以导出.pag文件，.pag文件支持使用canvas来渲染，并且支持视频的序列帧。满足前端要求。

目标是降低或消除动效相关的研发成本，能够一键将设计师在 AE（Adobe After Effects）中制作的动效内容导出成素材文件，并快速上线应用于几乎所有的主流平台。

lottie动画_Lottie前端实现AE动效

这个也能实现与PAG 类似的效果，且PAG在使用时本质就是一个视频播放器，受限微信浏览器的限制，需要用户点击一下才能正常播放动画，而lottie不是以视频播放器为基础，可以直接播放动画。但lottie也有局限性如不支持序列帧和其它AE特效及表达式等。

原生视频mp4 (h264)

才用原生的视频文件 h264 mp4。 采用canvas进行绘制实现动画效果。（这种方案最简单，且能呈现基于mp4的动画特效）

总结

炫酷的特效总有方法实现的，找个视频小哥哥学会pag 或 lottie 并用这个工具导出文件即可。