做精品课程网站需要啥素材wordpress首页聚合模块

当前位置： 首页 > news >正文

做精品课程网站需要啥素材,wordpress首页聚合模块,彭州做网站的公司,网站备案产品信息错误目录 一、背景1.1 GIF Video1.2 存在的问题 二、技术方案2.1 使用CSS动画和JavaScript2.2 使用JavaScript库2.3 使用序列帧1. css animation 帧动画2. JavaScript requestAnimationFrame 帧动画 2.4 使用Canvas1. html 和 canvas 中的 video2. 基于Canvas的动画库 今天我… 目录 一、背景1.1 GIF Video1.2 存在的问题 二、技术方案2.1 使用CSS动画和JavaScript2.2 使用JavaScript库2.3 使用序列帧1. css animation 帧动画2. JavaScript requestAnimationFrame 帧动画 2.4 使用Canvas1. html 和 canvas 中的 video2. 基于Canvas的动画库 今天我们主要介绍在移动端IOS和安卓实现全屏动画播放。 一、背景 1.1 GIF Video 在移动端iOS 和安卓实现全屏动画播放尤其是对于 webview h5 来说想要播放一个比较复杂的动画可能我们会马上想到要么使用 GIF 图片、要么使用 视频video。 使用视频video或 GIF 图片也是实现全屏动画的有效方案之一它们具有一些优势和适用场景 简单易用: 对于一些简单的动画效果特别是循环播放的动画使用 GIF 图片可能是最简单、最快速的解决方案。只需将 GIF 图片嵌入到页面中即可不需要编写额外的代码。 跨浏览器兼容性好: GIF 图片和视频都有很好的跨浏览器兼容性可以在各种现代浏览器和移动设备上播放。 文件大小较小: 对于简单的动画效果GIF 图片通常比视频文件的大小更小因此可以更快地加载和播放节省带宽和用户流量。 支持透明度: GIF 图片支持透明度可以实现更多种类的动画效果比如带有透明背景的动画。
img srcexample.gif altGIF Example width100% height100%video controls width100% height100%source screxample.mp4 typevideo/mp4Your browser does not support the video tag. /video1.2 存在的问题 但是全屏动画场景下对于前者来说容易造成资源太大导致页面加载卡顿的问题因为在移动设备网络速度可能相对较慢加载 GIF 图片需要发送 http 请求加载和解析过程可能会影响页面的响应性和交互性用户可能会感受到页面卡顿或响应不及时的问题对于后者来说虽然是边加载边播放但各种终端不同兼容性让人抓狂比如虽然支持不同 source 源但是对于某些机型只能读取第一个 source而且对于各种视频格式并不是所有机型都能支持另外视频还有自动播放问题和静音问题甚至有些机型如ios会自动打开一个播放器来全屏播放无法做到在 webview 内正常内联播放。 最后尤其对于复杂的动画效果、需要交互性、需要动态生成内容或需要更高的性能要求的情况可能更适合使用其他方案如使用 CSS 动画、JavaScript 动画库或 Canvas 动画。这些方案提供了更多的灵活性和控制能力可以实现更复杂、更高性能的动画效果。 二、技术方案 在移动端iOS 和安卓实现全屏动画播放可以采用以下几种方案 2.1 使用CSS动画和JavaScript 使用CSS动画来创建全屏动画效果然后通过JavaScript来控制动画的播放、暂停和进度控制等功能。可以使用CSS中的keyframes规则来定义动画然后通过JavaScript来触发动画的播放和暂停。 下面是一个示例代码演示了如何使用 CSS 动画创建全屏动画效果并通过 JavaScript 控制动画的播放、暂停和进度控制 HTML: !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFullscreen Animation/title link relstylesheet hrefstyles.css /head bodydiv classcontainerdiv classanimation/div/divbutton onclickplayAnimation()Play/buttonbutton onclickpauseAnimation()Pause/buttoninput typerange min0 max100 value0 step1 onchangesetAnimationProgress(this.value) /body script srcscript.js/script /htmlCSS (styles.css): .container {width: 100px;height: 300px;background-color: blue;position: relative;overflow: hidden; }.animation {width: 10px;height: 10px;background-color: white;animation: slide 5s linear infinite; }keyframes slide {0% {transform: translateY(0);}100% {transform: translateY(calc(-100% 300px));} }JavaScript (script.js): var animation document.querySelector(.animation); var animationPaused false;function playAnimation() {animation.style.animationPlayState running;animationPaused false; }function pauseAnimation() {animation.style.animationPlayState paused;animationPaused true; }function setAnimationProgress(progress) {if (!animationPaused) {pauseAnimation();}const containerHeight document.querySelector(.container).clientHeight;const animationHeight animation.clientHeight;const maxTranslateY containerHeight - animationHeight;const translateY (maxTranslateY) * (progress / 100);animation.style.animation none;animation.style.transform translateY( translateY px); }在这个示例中.container 容器包含一个高度为300px的动画元素.animation通过 CSS 动画定义了一个垂直向上滑动的动画效果。页面中有三个按钮分别用于播放、暂停和设置动画进度。通过 JavaScript 控制动画的播放状态和进度playAnimation() 函数用于播放动画pauseAnimation() 函数用于暂停动画setAnimationProgress() 函数用于设置动画的进度参数是一个介于0和100之间的值表示动画播放进度的百分比。 2.2 使用JavaScript库 该方案主要是对于第一种方案的优化通过第三方动画库丰富的、方便使用的 API 来实现动画。 使用现成的JavaScript动画库如GSAPGreenSock Animation Platform或者Anime.js等这些库提供了丰富的动画功能和API可以方便地实现全屏动画效果并且具有良好的跨浏览器兼容性和性能优化。 2.3 使用序列帧 前面两种方案主要是针对各种比较规律的动画的实现那假如要全屏展示一段复杂的动画或视频内容呢 有两种方案 序列帧canvas 我们先介绍序列帧。 序列帧又分为 css animation 帧和 JavaScript requestAnimationFrame 帧。

1. css animation 帧动画 使用 sprite 图和 background-position 再加上 animation 的 step 函数可以实现序列帧动画。 以一个 3s 的全屏动画为例我们可以拆为 36 张图1s 12帧一张图宽度375px那么36张图合成一张横图13500px。再利用 css animation 播放 .video {width: 100%;height: 100%;background: url(test.png)overflow: hidden;animation: a_video 3s steps(36); }keyframe a_video {from {background-position: 0 0;}to {background-position: 13500px 0;} }当然很明显合成一个完整的图片会太长而且图片大小非常夸张 这种图片在移动端也会造成卡顿的。当然如果是小范围 div 内非全 屏的动画需求应该可以忽略资源大小的问题。 因此我们可以进一步分成多个阶段比如 3s 我们可以分成 3 个 1s做 3 张图1 张图包含 1s 内的 15 帧 具体代码 .video {width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;background-size: 500% 300%;background-repeat: no-repeat;animation: a_video 3s steps(1, end); }keyframe a_video {0% {background-image: url(video-1.jpg);background-position: 0 0;}6% {background-image: url(video-1.jpg);background-position: 25% 0;}12% {background-image: url(video-1.jpg);background-position: 50% 0;}18% {background-image: url(video-1.jpg);background-position: 75% 0;}24% {background-image: url(video-1.jpg);background-position: 100% 0;}30% {background-image: url(video-1.jpg);background-position: 0% 50%;}36% {background-image: url(video-1.jpg);background-position: 25% 50%;}/…/60% {background-image: url(video-1.jpg);background-position: 0% 100%;}66% {background-image: url(video-1.jpg);background-position: 25% 100%;}/…/100% {background-image: url(video-1.jpg);background-position: 100% 100%;} }2. JavaScript requestAnimationFrame 帧动画 使用 requestAnimationFrame 来逐帧渲染雪碧图可以实现流畅的动画效果。下面是一个简单的示例演示了如何使用 requestAnimationFrame 来实现逐帧渲染雪碧图 css: #sprite {width: 100px;height: 150px;background-image: url(spritesheet.png);background-size: cover;}JavaScript (script.js): const sprite document.getElementById(sprite); const frameWidth 100; // 每帧宽度 const frameHeight 150; // 每帧高度 const totalFrames 15; // 总帧数 const framesPerSecond 10; // 每秒播放帧数let currentFrame 0; let lastFrameTime 0;function animate(timestamp) {// 在 requestAnimationFrame 回调函数中timestamp 是一个 DOMHighResTimeStamp 类型的参数表示当前回调函数被触发的时间戳// 该时间戳是一个高分辨率的值通常以 ms 为单位相对于页面加载开始时的性能时间原点// 这里我们用这个 timestamp 来计算动画的进度const elapsed timestamp - lastFrameTime;if (elapsed (1000 / framesPerSecond)) { // 每秒要播放10帧 一帧持续100ms// 当超过 100ms 即表示要切换到下一帧lastFrameTime timestamp;// 计算当前帧的位置const frameX currentFrame % 3 * frameWidth;const frameY Math.floor(currentFrame / 3) * frameHeight;// 设置背景位置sprite.style.backgroundPosition -\({frameX}px -\){frameY}px;// 更新当前帧的索引// 注意 这里 % totalFrames 的作用是实现循环播放currentFrame (currentFrame 1) % totalFrames;}requestAnimationFrame(animate); }// 开始动画 requestAnimationFrame(animate);在这个示例中我们首先定义了一个包含 15 帧的 3x5 的雪碧图每帧的宽度为 100px高度为 150px。然后我们使用 requestAnimationFrame 来启动动画循环在每帧中更新雪碧图的背景位置从而实现逐帧渲染的效果。 2.4 使用Canvas 使用HTML5 Canvas元素来绘制全屏动画效果。
2. html 和 canvas 中的 video 在 HTML 和 Canvas 中使用视频video有一些不同之处主要涉及到了它们的用途、控制方式和性能等方面 用途 在 HTML 中使用视频video元素主要用于在网页中展示和播放视频内容。视频元素可以通过 HTML 标签直接嵌入到页面中并提供了一些内置的控制功能如播放、暂停、音量调节等。在 Canvas 中使用视频通常是为了在画布上绘制视频的每一帧并实现更加灵活的视频处理和展示效果。Canvas 提供了绘图 API可以将视频的每一帧绘制到画布上并进行自定义的处理和动画效果。 控制方式 在 HTML 中视频元素具有内置的控制功能用户可以通过浏览器提供的默认 UI 来控制视频的播放、暂停、音量调节等操作也可以通过 JavaScript 来动态控制视频的行为。在 Canvas 中要实现对视频的控制通常需要使用 JavaScript 来处理视频的播放和暂停等操作以及绘制视频的每一帧到画布上。 性能 在 HTML 中使用视频元素通常具有较好的性能和兼容性因为视频的播放和渲染是由浏览器内核直接处理的可以充分利用硬件加速来提高性能。在 Canvas 中使用视频需要将视频的每一帧绘制到画布上这涉及到大量的图像处理和绘制操作可能会对性能产生一定影响特别是在处理大尺寸或高分辨率视频时。
   总的来说HTML 中的视频元素适用于简单的视频展示和播放场景而 Canvas 中的视频处理适用于需要更多自定义和交互性的视频处理和展示效果。选择使用哪种方式取决于具体的需求和场景。 另外在 Canvas 中渲染视频通常不会涉及到使用原生播放器因为视频的播放和渲染是由 Canvas 直接控制的而不是依赖于浏览器提供的原生播放器。因此与使用 HTML5 video 元素播放视频相比Canvas 中渲染视频可以更灵活地控制视频的播放、渲染和效果。 但是需要注意的是Canvas 中渲染视频可能会涉及到一些其他方面的问题例如 性能问题在 Canvas 中渲染视频可能需要大量的计算和绘制操作特别是在处理高分辨率或大尺寸的视频时可能会对性能造成一定的影响需要进行优化和考虑性能问题。 兼容性问题Canvas 的功能和性能在不同浏览器和设备上可能会有所不同需要进行兼容性测试和调整。 实现复杂度相比于使用原生播放器播放视频Canvas 中渲染视频可能需要更多的编程和实现复杂度包括视频的解码、帧的处理、渲染效果的实现等。当然利用第三方库可以一定程度避免该问题。
   总的来说Canvas 中渲染视频可以提供更多的自定义和控制能力但也需要考虑到性能、兼容性和实现复杂度等方面的问题。
3. 基于Canvas的动画库 有许多基于 Canvas 的动画库可以帮助开发者更轻松地创建各种动态和交互式的 Canvas 动画。以下是一些常用的基于 Canvas 的动画库 PixiJSPixiJS 是一个功能强大的 WebGL 渲染引擎提供了丰富的 API 和工具用于创建高性能的交互式 2D 游戏和图形应用。它可以与 Canvas 兼容并且支持 WebGPU、WebGL 和 Canvas 2D 渲染。它提供了易于使用的 API适合用于创建各种类型的 Canvas 动画和游戏。 CreateJSCreateJS 是一个包含多个模块的 JavaScript 库其中包括 EaselJS、TweenJS、SoundJS 和 PreloadJS。其中的 EaselJS 模块提供了一套简单易用的 API用于在 Canvas 上绘制图形和创建动画。它可以用来创建各种类型的 Canvas 动画和交互式应用。 Two.jsTwo.js 是一个轻量级的 2D 绘图库它提供了一系列的 API 和工具用于在 Canvas 上创建图形、动画和交互式应用。它具有简单易用的 API适合用于创建简单的 Canvas 动画和图形应用。 Three.js 一个用于创建 3D 图形的 JavaScript 库虽然它主要用于 WebGL但也可以在 Canvas 上创建 3D 图形并提供了丰富的 3D 渲染功能和特效支持。
   这些基于 Canvas 的动画库都具有不同的特点和适用场景开发者可以根据自己的需求和偏好选择合适的库来创建 Canvas 动画和应用。 更多关于 Canvas 内容可以阅读 HOW - Canvas 入门系列一