WEB前端教程：把 AE 动画转换成 Web 原生动画 - 好学星城学习论坛

page contents

WEB前端教程：把 AE 动画转换成 Web 原生动画

安装 After Effect 并熟悉基本操作

课程目标

安装 After Effect 并熟悉基本操作
利用 Lottie 导出制作一个复杂的 Web 动画
实现一个炫酷的带动画的官网首页

阅读

编码一

下载我们提供给你的设计稿 (opens new window)以及 AE 源文件 (opens new window)，通过 Lottie 导出 Web 可用的 json 文件，实现预览 demo (opens new window)中所示首页动画效果。

要求

仔细阅读学习 Lottie 官方文档(opens new window)
注意动画在不同设备中性能和表现
请保持代码风格的整齐、优雅
HTML 及 CSS 代码结构清晰、规范
代码中含有必要的注释

编码二

学有余力的同学，可以下载我们提供给你的 AE 源文件 (opens new window)，尝试实现 san 官网首页卡片 hover 效果，如预览 demo (opens new window)。

鼠标悬浮在卡片上的时候出现动画

要求

注意各项属性在不同浏览器中的兼容性
请注意代码风格的整齐、优雅
HTML 及 CSS 代码结构清晰、规范
代码中含有必要的注释

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-31 16:20
阅读 ( 446 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1478 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章