|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/web-animations/
课程评论：没有评论
课程名称：现代网页动画 课程概述： 欢迎参加《现代网页动画》课程！本课程深入探讨现代动画技术，无需使用任何库，仅通过浏览器API来实现。CSS动画和过渡已经存在很长时间了，但最近现代浏览器引入了一些新API，进一步改善了网页上的动画效果，赋予开发者更多的控制权。其中一个新添加的API是网页动画API（WAAPI），它为开发者解锁了浏览器动画引擎的强大功能，使我们能够用JavaScript构建动画并控制其播放，是在网页上实现动画的高效方式。 除此之外，CSS动画增加了一些新特性，允许我们在用户滚动时控制动画。通过使用如animation-timeline、scroll-timeline和view-timeline等新属性，我们可以创建不基于时间而是基于滚动进度或特定元素在视口中的可见性的动画。这为创造引人注目的滚动驱动动画提供了可能，而无需加载任何外部库。 现代浏览器的另一个新特性是视图过渡API。这个API可以让我们轻松创建不同DOM状态之间的动画过渡。在单页应用（SPA）中，当我们在不同路由之间导航时，该API尤其有用，因为之前实现这种类型的动画非常复杂。 在本课程中，我们将详细覆盖所有这些主题。此外，我们还将有一部分专门讨论旧的CSS动画和过渡，深入探讨它们的每一个方面。课程中将提供每个讨论主题的实际实例和练习。 如果你想让你的网站生动起来，欢迎加入我们的课程！
Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control. Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser's animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.So join now if you want to bring your websites to life!
