苹果官网动画解析之airpods滚动光影效果

2024-01-16 20:04
文章标签 解析 效果 动画 苹果 滚动 官网 airpods 光影

本文主要是介绍苹果官网动画解析之airpods滚动光影效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

每次看到苹果官网的动画效果都令人震惊，总想去理解他并复刻下来，那我们今天就来实现苹果官网中AirPods的滚动变化光影的效果。

下面先看最终的效果：

airpods滚动效果

可以看出，我们向下滚动的时候，图片元素并没有跟随滚动，光影效果一直在改变。如果我们向上滚动，则会让动画效果反方向运行。这就是我们想要的结果。

核心原理

根据滚动，使用Canvas的drawImage不停的画不同的图片，从而实现不同的展示效果

准备工作

1. 图片哪里来？

苹果有一组图片:

https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/xxx.jpg

xxx: 从0001到 0147

滚动怎么监听？原生写？

当然不是，这里我们使用gsap这个库。

简单来说，这就是一个使用js创建动画的库，好用之处在于它支持很多插件，并且可以很方便的使用属性来控制css样式。缺点就是有些插件是要收费的，但是我们今天用到的 ScrollTrigger是免费的。

这里就不介绍具体使用方法，因为太多，可以自己去官方网站看看。

正式开始

样式使用的是Tailwind CSS，这个用习惯了还是很好用的。

1. 创建一个空的canvas并引入gsap

<section class="airpods bg-black py-14"><canvas id="airpods"></canvas>
</section><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

2. 使用canvas画第一张图

    const canvas = document.getElementById('airpods');const context = canvas.getContext("2d");// 这里根据图片的大小设置宽高canvas.width = 1158;canvas.height = 770;const img = new Image();img.src = 'https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg';img.onload = () => {context.drawImage(img, 0, 0, canvas.width, canvas.height);};

在这里插入图片描述

3. 预加载所有图片，以便动画能够流畅

    const frameCount = 147;function preloadImages() {  for (let i = 1; i < frameCount; i++) {const img = new Image();img.src = currentFrame(i);}}// 处理图片地址function currentFrame(index) {  return  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, "0")}.jpg`;}preloadImages();

4. 使用gsap创建动画

    // 要使用插件，必须先注册gsap.registerPlugin(ScrollTrigger);/** gsap语法：* gsap.to(target, {property: value, property: value, ...});** scrollTrigger语法：* scrollTrigger: {*   trigger: target, // 滚动谁触发动画*   scrub： true | false, // 动画是否重复执行，也就是再次进入后触发与否*   pin: true | false, // 是否固定在触发位置*   start: "top 10%", // 触发开始位置  后面详细介绍*   end: "bottom+=300% 10%", // 触发结束位置*   markers: true | false, // 是否显示辅助线，主要用于开发阶段*   ...* }* **/gsap.to(canvas, {scrollTrigger: {trigger: canvas,scrub: true,start: "top 10%",end: "bottom+=300% 10%",pin: true,markers: true,onUpdate: (self) => {// self.progress 表示滚动的百分比 0-1const frameIndex = Math.min(frameCount,Math.ceil(self.progress * frameCount + 1));requestAnimationFrame(() => updateImage(frameIndex));},}});function updateImage(index) {img.src = currentFrame(index);context.drawImage(img, 0, 0);}

完成上面几步就能够实现我们最终的效果了。

start、end详细介绍

我认为其他参数都还是比较好理解，唯独这两个有一些绕，所以这里单独介绍下。

首先看默认值

在这里插入图片描述

首先要清楚这两个值由两部分组成，分别控制元素和视口。

只要start在scroller-start之上，且end在scroller-end之下的，那么动画就会触发。

这两部分的值可以有很多种形式，比如单词类：top、bottom、center，百分比10%、100%， 像素 100px等等，他们之间可以使用相对位置，比如top+=10%，bottom-=100px等等。
所以这个部分不同的组合就能创建出不同的触发动画的时机，只有慢慢去尝试，才能理解得非常清晰。

就拿我们的代码来说：

    start: "top 10%",end: "bottom+=300% 10%",

在这里插入图片描述

end 不见了是因为它在视口以外了。

这个end为什么是300%？

因为我们需要滚动时拉长总的滚动距离（分母），而鼠标滚动一次的距离（分子）几乎是固定的，这样就让我们的progress变得更加小，从而使动画更加平滑。

progress = 拉长总的滚动距离 / 鼠标滚动一次的距离

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><title>AirPods</title>
</head>
<body><main class="bg-slate-300 animate-demo "><section class="airpods  bg-black py-14"><canvas id="airpods" class=""></canvas></section></main><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script><script>function airpods() {const frameCount = 147;const canvas = document.getElementById('airpods');const context = canvas.getContext("2d");canvas.width = 1158;canvas.height = 770;const img = new Image();img.src = currentFrame(1);img.onload = () => {context.drawImage(img, 0, 0, canvas.width, canvas.height);};/** gsap语法：* gsap.to(target, {property: value, property: value, ...});** scrollTrigger语法：* scrollTrigger: {*   trigger: target, // 滚动谁触发动画*   scrub： true | false, // 动画是否重复执行，也就是再次进入后触发与否*   pin: true | false, // 是否固定在触发位置*   start: "top 10%", // 触发开始位置  后面详细介绍*   end: "bottom+=300% 10%", // 触发结束位置*   markers: true | false, // 是否显示辅助线，主要用于开发阶段*   ...* }* **/gsap.to(canvas, {scrollTrigger: {trigger: canvas,scrub: true,start: "top 10%",end: "bottom+=300% 10%",pin: true,markers: true,onUpdate: (self) => {// self.progress 表示滚动的百分比 0-1const frameIndex = Math.min(frameCount,Math.ceil(self.progress * frameCount + 1));requestAnimationFrame(() => updateImage(frameIndex));},}});function updateImage(index) {img.src = currentFrame(index);context.drawImage(img, 0, 0);}function preloadImages() {for (let i = 1; i < frameCount; i++) {const img = new Image();img.src = currentFrame(i);}}function currentFrame(index) {return  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, "0")}.jpg`;}preloadImages();}airpods();</script>
</body>
</html>

拿去就能跑，你可以试试~

如果你觉得有用，欢迎评论、点赞、转发~
当然也希望你能关注我的公众号：前端大乱炖
在这里插入图片描述

这篇关于苹果官网动画解析之airpods滚动光影效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/613738。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

在家里，灯具是属于离不开的家具，每个大大小小的地方都需要的照亮，所以一盏好灯是必不可少的，每个发挥着作用。而护眼台灯就起了一个保护眼睛，预防近视的作用。可以保护我们在学习，阅读的时候提供一个合适的光线环境，保护我们的眼睛。防近视护眼台灯什么牌子好？那我们怎么选择一个优秀的护眼台灯也是很重要，才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐： 一：六个推荐防近视效果好的护眼台灯的
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
OWASP十大安全漏洞解析

OWASP十大安全漏洞解析

OWASP（开放式Web应用程序安全项目）发布的“十大安全漏洞”列表是Web应用程序安全领域的权威指南，它总结了Web应用程序中最常见、最危险的安全隐患。以下是对OWASP十大安全漏洞的详细解析： 1. 注入漏洞（Injection） 描述：攻击者通过在应用程序的输入数据中插入恶意代码，从而控制应用程序的行为。常见的注入类型包括SQL注入、OS命令注入、LDAP注入等。 影响：可能导致数据泄
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
多线程解析报表

多线程解析报表

假如有这样一个需求，当我们需要解析一个Excel里多个sheet的数据时，可以考虑使用多线程，每个线程解析一个sheet里的数据，等到所有的sheet都解析完之后，程序需要提示解析完成。 Way1 join import java.time.LocalTime;public class Main {public static void main(String[] args) thro
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2