如何创建自定义的HTML元素
HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScript API创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元素和定义他们需要的JavaScript API。我们开始吧。
HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScript API创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元素和定义他们需要的JavaScript API。我们开始吧。
TimelineMax是GASP的一部分,用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列(如CSS属性和SVG),而且你不需要对JavaScript非常熟练。本系列教程将从非常基础的知识开始讲起,介绍TimelineMax库和它的基础语法,再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中,我们将使用一些实际的demo来辅助大家学习。什么是TimelineMax?它和其它的GreenSock动画平台(GSAP)的库有什么不同?为什么比起TimelineLite更需要TimelineMax?我该如何去理解TimelineMax的参数?如果你有以上的这些疑问,那你就来对地方了~
先来看一下一些名词定义?Mechanics的定义是:关注对象受力或位移的行为的区域,以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法,有时候也被描述为a project artefact。我们结合这两块内容,学习如何控制和配置我们的动画,这样才知道我们要做什么。
在以前,动画Tweening是描述一帧一帧序列的术语,有时候也被称为in-between
。放置在一个运动结束,要进行下一个运动前,中间创建一个流畅的过渡。年纪比较大的同学可能会记得Flash;这个应用程序在引用帧移动时使用了这个术语。我们先来仔细观察几个示例。
在这篇教程中,我们将学习如何控制动画,根据需求,使用一个叫做addPause()
的方法。准备好了吗?开始吧!addPause()
方法是一种控制方法,允许开发者在时间轴上的任何位置放置一个暂停。这比使用一个回调函数来暂停另一个函数要精确得多(这是在addPause()
出现之前大家不得不采用的方法)。这个控制方法还可以插入一个特殊的回调,在特定的时间戳或标签暂停时间轴的播放。这样做有助于确保,如果虚拟播放指针稍微超过了暂停的位置,它可以回到那个设置暂停的位置。
当你需要一些比较高级的功能的时候,GSAP的插件是非常棒的。我在这篇教程中介绍的BezierPlugin插件,可以使得几乎所有的属性沿着一条由一组点/值定义的贝塞尔曲线路径运动。在正式进入学习之前,我们需要先花点时间来学习贝塞尔曲线到底是什么,以及它是如何诞生的。
众所周知,Sass中有一些类似于其他编程语言的特性与功能,那么在本文中,我们将会解析一下Sass中的操作符。主要向大家介绍如何使用Sass中的操作符。
如果你深入地使用过 Sass,那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们,但是熟悉一下这些指令,可能会有意想不到的收获!
图案是非常常用的设计元素。它可以提供对比,创建一个深度感,并给组合添加趣味。SVG可以很方便地创建和使用图案,随心所欲~我上次提到了这周要讨论一个可以定义并重用的元素,就是pattern
啦。这篇文章我们要讨论<pattern>
元素,以及如何在SVG中使用这个元素。大概会讲SVG图案的基础,然后下一篇讲解如何创建复杂一些的图案。
网页设计元素之一——图案,通常是使用图片创建的。虽然一些图案可以使用CSS创建,但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案,还可以缩放,而且需要很少的http
请求。上一篇文章中我们大概看了SVG<pattern>
元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个<pattern>
元素的属性。今天我们继续讨论几个pattern
属性,其中一个可以通过引用另一个图案,xlink:href
,帮我们创建更复杂的图案。首先快速回顾一下我上次讲过的内容。