澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2020-03-18 12:09 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

干货系列之手把手教你使用Core,CSS3动画属性

源码下载:源码

一:动漫(animationState of Qatar的参数安详严整

由于地点用到了animation动漫,这里详细介绍下这一个animation的参数。

多年来在才能群里,有人发了一张带有动漫效果的图纸。感到很有意思,便起始落成了一晃。在此篇文章中您将会学到Core Animation显式动漫中的关键帧动漫、组合卡通、CABasicAnimation动漫。先上一张原图的卡通片效果。

简介

CSS动漫(Animations卡塔尔国轻易说正是在一段固定的动漫时间内暗中在某一频率内转移其CSS有些或某个值,进而到达视觉上的退换动漫效果。Animations的不在少数上边都是足以操纵的,包蕴动漫运维时刻,起头值和告竣值,还应该有动漫的暂停和延缓其起始时间等。

点击此查看[原图动漫成效]( animation.gif)。

语法

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<' animation-name '>:检索或设置对象所运用的动漫片名称
<' animation-duration '>:检索或安装对象动漫的持续时间
<' animation-timing-function '>:检索或设置对象动漫的连通类型
<' animation-delay '>:检索或设置对象动漫延迟的时间
<' animation-iteration-count '>:检索或安装对象动漫的大循环次数
<' animation-direction '>:检索或设置对象动漫在循环中是还是不是反向运动
<' animation-fill-mode '>:检索或安装对象动漫时间之外的情景
<' animation-play-state '>:检索或安装对象动漫的景观。w3c正考虑是不是将该属性移除,因为动漫的图景能够透过此外的点子实现,比方重设样式

正文要落到实处的成效图如下:

animation

全体动漫属性的简写属性,除了 animation-play-state 属性。

图片 1落到实处的效应图.gif

animation-name

明确 @keyframes 动漫的称号。便是@keyframes后边跟着的动漫名称。

把原动漫gif动漫在mac上接收图片浏览形式张开,我们得以看见动漫每一帧的显示。从每一帧上的显得进度,能够把全部的卡通实行拆分成两大片段。

animation-duration

分明动漫完结三个周期所花销的秒或微秒。私下认可是 0。

第一盘部从上马状态变为废除状态(图片上是由横实线形成上线横线交叉的圆)。第二部分从打消状态变回初步状态。

animation-timing-function

分明动漫的过程曲线。暗许是 "ease"。

大面积的动漫速度参数:

  1. linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0卡塔尔(قطر‎

  2. ease:平滑对接。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0State of Qatar

  3. ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0卡塔尔(قطر‎

  4. ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0卡塔尔(قطر‎

  5. ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0卡塔尔国

  6. step-start:等同于 steps(1, start)

  7. step-end:等同于 steps(1, end)

  8. steps(<integer>[, [ start | end ] ]?卡塔尔(قطر‎:接纳七个参数的步进函数。第三个参数必需为正整数,钦赐函数的步数。第3个参数取值能够是start或end,钦定每一步的值发生变化的时间点。第1个参数是可选的,暗许值为end。

  9. cubic-bezier(<number>, <number>, <number>, <number>卡塔尔:特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

上边大家先详细解析Part1是怎么落到实处的。依照动漫图,把Part1再细分成三步。

animation-delay

规定动漫哪天开端。默许是 0。也正是指动漫延时奉行时间。

Step1 : 中间横实线的由右向左的移位功效。那实际是三个组成卡通。是先向左偏移的还要横线变短。先看一下达成的动态效果。

animation-iteration-count

鲜明动画被广播的次数。私下认可是 1。当然,大家得以设置2次,3次,依次递推。还会有个有线循环关键字infinite,也便是屡次循环播放动漫。

图片 2step1 Animation.gif■ 向左偏移---使用基本动漫中animationWithKeyPath键值对的方法来校订动漫的值。大家那边运用position.x,相仿能够行使transform.translation.x来平移。

animation-direction

分明动漫是不是在下一日期逆向地播放。暗许是 "normal"。当然还应该有下列值:

  1. reverse:反方向运维

  2. alternate:动漫先平常运维再反方向运维,并持续更迭运营

  3. alternate-reverse:动漫先反运转再正方向运营,并不停轮换运维

■ 改造横线的大小---使用杰出的strokeStartstrokeEnd。其实上横线长度的转移的由strokeStartstrokeEnd时期的值来合营来决定。校勘strokeEnd的值由1.0到0.4,不改变strokeStart的值。横线的尺寸会从左边方向由1.0倍长度收缩到0.4倍长度。参见暗示图的新民主主义革命区域。

animation-fill-mode

分明对象动漫时间之外的情形。

  1. none:私下认可值。不安装对象动画之外的意况

  2. forwards:设置对象意况为动漫结束时的情景

  3. backwards:设置对象景况为动漫开端时的气象

  4. both:设置对象景况为动漫片截止或伊始的情形,动漫初始以前是"from"或"0%"关键帧;动漫达成今后是"to"或"100%"关键帧状态。

图片 3stroke示意图.png

animation-play-state

明显动漫是不是正在运维或中断。暗中同意是 "running"。还大概有个值paused:暂停。

- animationStep1{ //最终changedLayer的状态 _changedLayer.strokeEnd = 0.4; //基本动画,长度有1.0减少到0.4 CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; strokeAnimation.fromValue = [NSNumber numberWithFloat:1.0f]; strokeAnimation.toValue = [NSNumber numberWithFloat:0.4f]; //基本动画,向左偏移10个像素 CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"]; pathAnimation.fromValue = [NSNumber numberWithFloat:0.0]; pathAnimation.toValue = [NSNumber numberWithFloat:-10]; //组合动画,平移和长度减少同时进行 CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; animationGroup.animations = [NSArray arrayWithObjects:strokeAnimation,pathAnimation, nil]; animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; animationGroup.duration = kStep1Duration; //设置代理 animationGroup.delegate = self; animationGroup.removedOnCompletion = YES; //监听动画 [animationGroup setValue:@"animationStep1" forKey:@"animationName"]; //动画加入到changedLayer上 [_changedLayer addAnimation:animationGroup forKey:nil];}

二:animation动漫实例

Step2 : 由左向右的动漫片--向右偏移同期横线长度变长。看一下Step2要达成的卡通效果。其思路和Step1是一成不改变的。

实例一使用from to

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /*Firefox*/
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
@-moz-keyframes mymove { /*Firefox*/
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove{ /*Safari and Chrome*/
    from {left:0px;}
    to {left:200px;}
}

图片 4step2 Animation.gif

实例二行使比例:

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst{ /* Firefox */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst{ /* Safari 和 Chrome */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst {/* Opera */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
-animationStep2{ CABasicAnimation *translationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; translationAnimation.fromValue = [NSNumber numberWithFloat:-10]; //strokeEnd:0.8 剩余的距离toValue = lineWidth * ; translationAnimation.toValue = [NSNumber numberWithFloat:0.2 * lineWidth ]; _changedLayer.strokeEnd = 0.8; CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; strokeAnimation.fromValue = [NSNumber numberWithFloat:0.4f]; strokeAnimation.toValue = [NSNumber numberWithFloat:0.8f]; CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; animationGroup.animations = [NSArray arrayWithObjects:strokeAnimation,translationAnimation, nil]; animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; animationGroup.duration = kStep2Duration; //设置代理 animationGroup.delegate = self; animationGroup.removedOnCompletion = YES; [animationGroup setValue:@"animationStep2" forKey:@"animationName"]; [_changedLayer addAnimation:animationGroup forKey:nil];}

实例三,利用js Transform和Animation实现3D动画

演示地址:

独有webkit内核的浏览器工夫看出有关3D动漫效果。

落时间效益果与利益如图所示:

图片 5

css代码:

body {
        font-family: 'Lucida Grande', Verdana, Arial;
        font-size: 12px;
      }

      #stage {
        margin: 150px auto;
        width: 600px;
        height: 400px;
        -webkit-perspective: 800;
      }

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      .ring {
        margin: 0 auto;
        height: 110px;
        width: 600px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      .ring > :nth-child(odd) {
        background-color: #995C7F;
      }

      .ring > :nth-child(even) {
        background-color: #835A99;
      }

      .poster {
        position: absolute;
        left: 250px;
        width: 100px;
        height: 100px;
        opacity: 0.7;
        color: rgba(0,0,0,0.9);
        -webkit-border-radius: 10px;
      }

      .poster > p {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        margin-top: 28px;
      }

      #ring-1 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 5s;
      }

      #ring-2 {
        -webkit-animation-name: back-y-spin;
        -webkit-animation-duration: 4s;
      }

      #ring-3 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 3s;
      }

      @-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }

      @-webkit-keyframes back-y-spin {
        0%    { -webkit-transform: rotateY(360deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); }
      }

html代码:

<div id="stage">
  <div id="rotate">
    <div id="ring-1" class="ring"></div>
    <div id="ring-2" class="ring"></div>
    <div id="ring-3" class="ring"></div>
  </div>
</div>

js代码:

const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;

function setup_posters (row){
    var posterAngle = 360 / POSTERS_PER_ROW;
    for (var i = 0; i < POSTERS_PER_ROW; i   ) {
      var poster = document.createElement('div');
      poster.className = 'poster';

      var transform = 'rotateY('   (posterAngle * i)   'deg) translateZ('   RING_RADIUS   'px)';
      poster.style.webkitTransform = transform;

      var content = poster.appendChild(document.createElement('p'));
      content.textContent = i;
      row.appendChild(poster);
    }
}

function init (){
    setup_posters(document.getElementById('ring-1'));
    setup_posters(document.getElementById('ring-2'));
    setup_posters(document.getElementById('ring-3'));
}

window.addEventListener('load', init, false);

参照地址:
CSS参谋手册:animation

Step3: 圆弧的动漫片效果和内外多少个横实线的卡通效果。

  1. 画圆弧,首先想到是选拔UIBezierPath。画个暗中提示图来解析动漫路线。暗中表示图如下:

图片 6step3 示意图.jpg

整个path路线是由三局地组成,ABC曲线CD圆弧DD′圆。使用UIBezierPath的方法

- appendPath:(UIBezierPath *)bezierPath;

把三部分路径关联起来。详细疏解思路。

ABC曲线不畏贝塞尔曲线,能够依据A、B、C三点的职位运用情势

//endPoint 终点坐标 controlPoint1 起点坐标//controlPoint2 起点和终点在曲线上的切点延伸相交的交点坐标- addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2;

一次贝塞尔曲线暗暗表示图如下:

图片 7三遍贝塞尔曲线.png

中间control point 点是从曲线上取 start point和end point 切点相交汇的所获得的交点。如下图:

图片 8control point .png

先是C点取圆上的有些,-30°。那么,

CGFloat angle = Radians;

C点坐标为:

 //C点 CGFloat endPointX = self.center.x   Raduis * cos; CGFloat endPointY = kCenterY - Raduis * sin;

A点坐标为:

 //A点 取横线最右边的点 CGFloat startPointX = self.center.x   lineWidth/2.0 ; CGFloat startPointY = controlPointY;

control point 为E点:

 //E点 半径*反余弦 CGFloat startPointX = self.center.x   Raduis *acos; CGFloat startPointY = controlPointY;

CD圆弧的路线使用此措施明显

  (instancetype)bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise;

有关弧度难点,UIBezierPath的法定文书档案中的那张图:

图片 9弧度.jpg

StartAngle 弧度即C点弧度,EndAngel弧度即D点弧度。

CGFloat StartAngle = 2 * M_PI - angle;CGFloat EndAngle = M_PI   angle;

DD′圆的不二等秘书诀和上边2相通的艺术明确。

StartAngle 弧度即D点弧度,EndAngel弧度即D′点弧度。

CGFloat StartAngle = M_PI *3/2 - (M_PI_2 -angle);CGFloat EndAngle = -M_PI_2 - (M_PI_2 -angle);

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:干货系列之手把手教你使用Core,CSS3动画属性

关键词: 澳门威利斯人 web前端 干货 手把手教你 动画