《JavaScript网页动画设计》读书笔记_html/css_WEB-ITnose
这两天开始看《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);
로그인 후 복사减少图片渲染
图片的形式:
- gradient
- box-shadow / text-shadow
视频、图片是多媒体元素类型,浏览器必须要加倍渲染才行。多媒体元素中包含上千万的像素数据,要改变它们的大小、尺寸或重新合成对浏览器计算开销很大。
另外,滚动页面几乎可以视为设置整个页面的动画(可以把滚动页面视为设置页面的top属性的动画),在移动设备中,多媒体元素会造成滚动性能的巨幅下降。
解决办法
尽可能少地加载图片

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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