1. 首页
  2. css

CSS介绍mo.js公司

mo.js公司是一个专门用于web运动的JavaScript库。它提供了一个声明性的语法运动和动画元素的创建。尽管mo.js公司仍然处于测试阶段,已经有很多惊人的功能可以使用。它的作者Oleg Solomoka(也称为@legomushroom)为图书馆的产品制作了令人印象深刻的演示和教程,你应该去看看,但在本文中,我们将快速概述功能和教程,以帮助您入门。

基本前提

mo.js公司基本上提供了两种方法来制造移动的东西。您可以执行其他库所做的操作,进入DOM或svgdom并移动它,也可以创建一个特殊的mo.js公司对象,它有一些真正独特的产品。两种工作方式都有一些基本的东西可用,比如自定义路径或时间线。路径放松和时间线也有相当令人印象深刻的工作工具,使他们更容易调整,而你的工作。

形状

取决于所设置的动画、形状和其他对象mo.js公司允许您简化工作流。mo.js公司提供了一种声明性语法,可以很容易地动态创建一些内容。

这是一个非常基本的例子:

以下是您需要知道的一些基本情况:

  • 您可以使用的形状包括:circlerectcrossequalzigzagpolygon。(默认值为circle
  • 定义填充、笔划和笔划宽度(默认值为无笔划填充或笔划宽度填充)。Equalcross没有要填充的空间,因此除非指定笔划,否则它们不会出现。)
  • 为形状定义半径,并在轴上使用附加半径X或半径Y进行调整。(默认值为50)
  • 如果要显示形状isShowStart,请让它知道,这是一个布尔值-true或false。如果你不打算设置形状的动画,这可以让你看到它。(默认值为false)
  • Polygonszigzagequal允许您选择多个点,以便您可以创建不同类型的形状(默认值为三个)
  • 所有形状都将使用绝对定位放置在屏幕中间,除非您指定top,左等。

下面是所有形状的示例:

如果查看DOM,您可能会注意到这些是放置在div内部用于定位的SVG形状。如果你想把形状放在DOM中的某个地方,你也可以传递一个父对象,比如parent: \"#id-to-be-placed-under\"。您还可以将任何DOM节点作为父节点传递,因此`parent: someEl`也可以工作。在某种程度上,您还可以选择使用div或SVG,这将是非常棒的,因为如果您可以将其与SVG viewBox一起放置,那么为移动设备创建缩放动画将变得更加容易。

我们还可以创建自定义形状来制作动画,并将它们添加到shape对象中。

//custom shapeclass OneNote extends mojs.CustomShape {getShape () { return \"<path = new mojs.ShapeSwirl({shape:\"oneNote\",...});

shapeMotion

以在中创建具有形状的动画mo.js公司,我们将传入一个对象,其中键和值表示我们希望从和到的对象。我们可以使用缩放、角度(在CSS中称为旋转)、不透明度等变换属性,还可以插值颜色,如这里的填充所示。

**16***

我们还可以指定一些其他参数:

    duration
  • delay
  • repeat
  • speed-1是默认速度,所以0.5是半速,1.5是1.5快一点,不管它是不是来回的,写的像安逸, 放松,或放松点
  • 后摆–如果您希望yoyo的后摆有所不同,那么这是一种配置。这只有在你使用isYoyo:true时才有效。如果您希望它向后缓和的方式与向前缓和的方式不同,您可以使用此方法指定它。如果未指定,则默认为宽松
  • IssofHide-是否使用变换隐藏形状而不是显示(布尔值默认为true)

随机

我们还可以非常轻松地传递随机值,例如,通过编写以下字符串-property : \"rand(min, max)\"angle: \"rand(0, 360)\"

链接

如果我们想在一个形状上链接两个动画,我们可以在初始二者之间调用.then(),如下所示:

const>

Swirl

Things like swirl and blast are pretty interesting parts of mo.js, they\"re pretty beautiful out of the box. Swirl is very similar to a regular shape object, but the movement is pretty much how it sounds- the shape swirls around. You have a few parameters to work with for a swirl, and they are all based on the sine that the swirl works with.

  • swirlSize- this is the deviation- so the amount it swirls horizontally
  • swirlFrequency- Frequency of sine
  • pathScale- sine length scales
  • degreeShift- this can shift the direction of sine, if you\"d like to make it move towards a different direction on a 360 degree, especially useful for using swirl with a burst
  • direction- direction of the sine, either -1 or 1 (good for setting something in the other direction if you want it to look a little random)
  • isSwirl: If shape should follow sinusoidal path (boolean- true or false)

These can be a little confusing to read and grok, so I\"ve made a demo so you can play with the values to understand them a little better:

Also, you can use a few base configurations like a custom shape or an object with some configurations to reuse for a few different SwirlShape选项(或任何其他形状)和ES6 spread操作符,如下所示,如果你有一些类似的对象,这真的很好:

const = new mojs.ShapeSwirl({...note_opts_two,fill:{ \"cyan\" : color2 },swirlSize:15,swirlFrequency: 20}).then({opacity:0,duration: 200,easing: \"sin.in\"});

突发也非常可爱。如果您使用默认配置,您会这样说:

const>

And it would return this (hit the Rerun button):

To configure a burst, you have a few options:

  • count- the number of children in the burst (default is 5)
  • degree- the number of degrees around the center that the children come from
  • Radius- the radius that the children spread out to (radiusX and radiusY applies here as well)
  • isSoftHide- whether it hides the children with transforms rather than display (boolean that defaults to true)- this applies to all shapes, but I bring it up again because it\"s particularly useful for a burst with several children.

All of the same rules for shape also apply to burst, and we can apply them to the nodes themselves as a separate object using children,像这样:

const>

Timeline

In a timeline, you can either add一堆您以前声明为变量的对象或tween,或者您可以append它们,并让它们按顺序排列。

const>
  • Add- allows you to add any of the objects or shapes to the above- they\"ll all fire at once (but you can still use delays or stagger to adjust their timing)
  • Append- adds objects but staggers them in the order they are added

There are a few things you can do in a timeline that are worth noting: you can add repeatsdelays,和speed,就像对象本身一样,作为如下对象参数:

new mojs.Timeline({repeat: 3,isYoyo: true});</

CSS介绍mo.js公司 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bb%8b%e7%bb%8dmo-js%e5%85%ac%e5%8f%b8/

发表评论

您的电子邮箱地址不会被公开。