목차
第一章 JavaScript动画与CSS动画
JS动画性能不是问题
JS动画独有的功能
第二章 使用Velocity.js实现动画
第三章 动效设计理论
第四章 动画工作流
CSS动画工作流
CSS的问题
什么时候用CSS
代码技巧:将样式与逻辑分离
一般做法
优化做法
代码技巧:组织排序动画
代码技巧:打包效果
第五章 文本动画
第六章 SVG入门
第七章 动画性能
布局颠簸
解决办法
避免影响临近的元素
优先考虑 opacity胜于 color
不用持续响应scroll和resize事件
减少图片渲染
웹 프론트엔드 HTML 튜토리얼 《JavaScript网页动画设计》读书笔记_html/css_WEB-ITnose

《JavaScript网页动画设计》读书笔记_html/css_WEB-ITnose

Jun 24, 2016 am 11:27 AM

这两天开始看《Javascript网页动画设计》,这里总结一下。这个库我之前用过,很方便也很流畅。但是里面除了第四章介绍了动画工作流和第七章介绍了动画性能外,都是介绍 Velocity 这个库的,或许叫『Velocity动画设计』更为妥当。

这里姑且记录一下,过一阵开始总结『web动画』这个主题。

第一章 JavaScript动画与CSS动画

JS动画性能不是问题

  • CSS 适合悬停状态的动画
  • JS动画和CSS动画一样快
  • 不要将JS与jQuery混为一谈
  • Velocity.js

JS动画独有的功能

  • 页面滚动:页面滚动到某个元素上
  • 动画反转:元素以动画形式变动回上一个动画开始之前的值
  • 物理动效:摩擦力

第二章 使用Velocity.js实现动画

动画的种类:

  • CSS动画: transition / animation
  • JS动画:GSAP、Velocity.js
  • canvas动画:Fabric.js
  • SVG动画:Snap.js 、SVG.js
  • WebGL动画:Three.js

详情可以看 这里

缓动方程

第三章 动效设计理论

这一章全是在讲理论的东西,难道买错书了?

第四章 动画工作流

CSS动画工作流

为了更好地管理UI动画工作流,开发人员有时会放弃JS而使用CSS。但是,一旦动画的复杂度达到了中等或更高水平,那么使用CSS动画通常会使工作流变得明显比用JS更加糟糕。

CSS的问题

CSS利用关键帧来实现复杂动画序列:

@keyframes myAnimation{    0%{opacity:0;transform:scale(0,0)}    25%{opacity:1;transform:scale(1,1)}    50%{transform:translate(100px,0)}    100%{transform:translate(100px,100px)}}#box{animation:myAnimation 2.75s}
로그인 후 복사

如果要把 opacity 动画时长增加1秒,其他属性动画时长不变,就必须要重新计算,才能使百分比各处的属性值与增加1秒后的时长匹配起来。

什么时候用CSS

当用户鼠标悬停在元素上时触发的简单样式变化,使用 transition

代码技巧:将样式与逻辑分离

一般做法

在jQuery中,主要由两种动画方式:

  • 利用 addClass() 和 removeClass() 切换样式
  • 使用 animate() : $ele.animate({opacity:1,top:50},1000)

第一种方法更值得推荐,因为它的代码组织得清楚,改样式就改CSS,改逻辑就改JS。

优化做法

定义一个JS对象,该对象的内容是要设置的CSS属性。然后将其传入Velocity或jQuery中。

//style.jsvar fadeIn = {    p: {        opacity: 1,        top: "50px"     },    o: {        duration: 1000,        easing: "linear"        }}//main.js$element.velocity(fadeIn.p,fadeIn.o);
로그인 후 복사

这样使用 style.js 有一个独有的能力——定义动画选项。

代码技巧:组织排序动画

Velocity 有一个名为 UI pack 的插件,能够优化UI动画工作流。

$element    .velocity({translateX:100})    .velocity({translateY;100})
로그인 후 복사

代码技巧:打包效果

$.Velocity.RegisterEffect("growIn",{    defaultDuration: duration,    calls: [        [ {opacity:1,scale:1},0.4 ],        [ {boxShadowBlur:50},0.6 ]    ]})$element.velocity("growIn")
로그인 후 복사

第五章 文本动画

网页上很少使用文本动画,这里介绍几种工具帮你免于文本动画枯燥乏味的一面,提供高效的工作流。

Blast.js

Blast能够将页面上的文本进行拆分

结合 velocity.js 和 velocity-ui

第六章 SVG入门

Snap.svg

SVG 动画,在原本应该使用图片的位置使用它:

  • 具有复杂动画序列的按钮,用户悬停鼠标或点击鼠标时会触发这些动画序列
  • 独特的加载状态图形,可以用来替代老掉牙的gif图
  • 公司logo,页面加载时,logo的各个部分可以一起以动画形式呈现

第七章 动画性能

布局颠簸

设置(set)、查询(get)一个元素的CSS属性是引发性能开销的两个核心浏览器进程(另外还有图形渲染)。

在为元素设置新属性后,浏览器必须计算你这次更改所产生的后续影响。例如,改变一个元素的宽度会导致一系列连锁反应;它的父级元素、兄弟元素和子元素的宽度根据自己的CSS属性也要调整。

由设置和获取样式的交替而导致的UI性能降低称为 布局颠簸

浏览器已经为页面布局的重新计算进行了高度优化,但由于布局颠簸,优化效果大打折扣。

例如,浏览器已经可以将同一时间的获取操作优化成一个单一、流畅的操作,因为浏览器在第一次获取之后可以缓存页面的状态,然后在后续每次获取操作时,参考那个状态。但是,如果反复执行获取后又设置,就让浏览器去做了很多繁重的工作,因为设置所做的更改会不断地使其缓存失效。

布局颠簸在动画循环中出现的话,对性能更是雪上加霜,最后就是让动画变得卡顿。

解决办法

把DOM的设置和获取的操作分别集合在一起批量操作

//糟糕的做法var currentTop = $('element').css('top'); //get$('element').style.top = currentTop + 1; //setvar currentLeft = $('element').css('left'); //get$('element').style.left = currentLeft + 1; //set
로그인 후 복사

如果把查询放在一起,把设置放在一起,那么浏览器就可以打包相应操作,减少代码造成的布局颠簸的影响:

var currentTop = $('element').css('top'); //getvar currentLeft = $('element').css('left'); //get$('element').style.top = currentTop + 1; //set$('element').style.left = currentLeft + 1; //set
로그인 후 복사

比如,点击按钮切换 none 和 block ,可能会先要检查侧边菜单的 display 属性是设置成 none 还是 block ,然后再相应地进行值得替换。检查是一次『获取』,之后无论设置成什么是一次『设置』。

想要优化的话,可以在设置一个变量,每当按钮点击的时候,这个变量跟着更新,然后在切换可见性之前,查询这个变量就可以得知菜单的当前状态了。『获取』的过程就可以省掉了。

避免影响临近的元素

有很多CSS属性,一经改变,就会造成临近元素尺寸或位置的调整,其中包括 top、right、bottom、left,margin、padding,border,以及width、height

解决办法

尽可能设置CSS的transform属性(translate、scale、rotate)的动画。transform属性的特殊之处在于它们将目标元素提升至一个单独的层,这个层可以独立于页面其他内容单独渲染(通过GPU加速提升性能),因此相邻的元素不会受到影响。

优先考虑 opacity胜于 color

opacity是另一个可以让GPU渲染加速的CSS属性,因为它不影响元素的位置。

比如,当用户鼠标悬停在元素上时color属性会改变,那么请考虑使用opacity动画来替代。如果最终效果和设置颜色的动画效果差不多,那么留用设置opacity动画吧。

请查看 CSSTrigger.com 上的内容,了解每个CSS属性如何影响浏览器性能。

不用持续响应scroll和resize事件

浏览器的scroll和resize是两个触发频率非常频繁的事件类型:每当用户调整或滚动浏览器窗口时,浏览器都会在每秒内触发多次与这些事件相关的回调函数。窗口scroll或resize的时候会多次触发事件,如果其中有布局颠簸,那么会给浏览器带来巨大负担。

解决办法

定义一个时间间隔,在此事件间隔期间,事件回调仅会被调用一次。这就是所谓的『反跳』。

例如定义了一个250毫秒的反跳间隔,而用户滚动页面时间为1000毫秒,这时候,事件回调仅仅会触发四次。

  • undersocre的 debounce 函数就是这个作用
  • flexible中是用的定时器:

    win.addEventListener('resize', function() {    clearTimeout(tid);    tid = setTimeout(refreshRem, 300);}, false);
    로그인 후 복사

    减少图片渲染

    图片的形式:

    1. gradient
    2. box-shadow / text-shadow

    视频、图片是多媒体元素类型,浏览器必须要加倍渲染才行。多媒体元素中包含上千万的像素数据,要改变它们的大小、尺寸或重新合成对浏览器计算开销很大。

    另外,滚动页面几乎可以视为设置整个页面的动画(可以把滚动页面视为设置页面的top属性的动画),在移动设备中,多媒体元素会造成滚动性能的巨幅下降。

    解决办法

    尽可能少地加载图片

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles