css3 animate 帧动画和雪碧图-完成一个盒子打开动画

写在最前面

• 最近作一个关于抽奖活动的项目，会涉及到不少动画，这里来探讨一下 scss 函数和 css 动画的制做

需求：如图

• 一个打开的盒子，其中有许多不规则的星星✨不规则的运动动，看着这个复杂的动画，我不由周冬雨附身--小黄鸭眉头一皱.gif。
• 已经很久没写动画的我该如何入手，在仅限的 css 知识中知道 animate 动画。

思考

• 一、盒子弹跳动画
• 二、光幕出现，阴影的出现动画
• 三、盖子不规则飞行
• 四、星星不规则飞行

实现

• 一、transform: scaleY() translate() 实现盒子弹跳
• 二、opacity 实现光幕和阴影
• 三、transform: rotateZ() 盖子飞行,翻转
• 四、top left transform: translate() 星星运动

大概的思路都有了开始动手

// 盒子居中布局
.stars{
    opacity: 0;
}

.box{
    top:50%;
    left:50%;
    position:absolute;
    transform: translate(-50%,-50%);
}

// 基础 keyframes  函数
@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content;
  }
}

// 因为是 translate 布局，这里改变定位使用 translate
@mixin animate-bounce($name:'bounce', $time: 1.5s, $animateFunc: linear) {
  animation: $name $time $$animateFunc;
  @include keyframes($name) {
        0% {
            transform: scaleY(1) translate(-50%, -50%);
        }
        8% {
            transform: scaleY(0.98) translate(-50%, -48%);
        }
        50% {
            transform: scaleY(1) translate(-50%, -70%);
        }
        100% {
            transform: scaleY(1) translate(-50%, -50%);
        }
    }
  }
}

@mixin animate-box-cover-fly($name:'box-cover-fly', $time: 1.5s, $animateFunc: linear){
    animation: $name $time $$animateFunc;
  @include keyframes($name) {
        0% {
            top: 23%;
            left: 50%;
        }
        100% {
            top: 5%;
            left: 62%;
            transform: translate(-20%, -50%) rotateZ(26deg);
        }
    }
  }
}

// 盒子弹跳
.box-bounce{
    @include animate-bounce('bounce');
}

.box-cover-fly{
    @include animate-box-cover-fly('box-cover-fly');
}

复制代码

思考

• 写到这里时候发现代码量会不少，即便用函数的形式，复写动画路径，具体实现中，发现效果并很差也不能彻底复刻设计给的动画。

• 而后 google 了一下动画的实现方法，发现了帧动画，和雪碧图。虽然这两个知识点早就据说过，可是使用的时候都是分开使用的。结合起来的时候也能作动画效果，说作就作，先写一个 demo

• html

<div className="step-box" />
复制代码

@mixin animate-spite-box($width: 134px) {
  background: url('https://uploads.codesandbox.io/uploads/user/abc364e4-ea65-4398-a1dc-df2645675b64/U59a-lightbulb.png') 0 0 no-repeat;
  background-size: cover;
  animation: spite-box 1s steps(4) infinite;
  @include keyframes(spite-box) {
    from {
      background-position: -8*$width;
     }
     to {
      background-position: -12*$width;
     }
  }
}

$box-width: 134px
$box-height: 113px;
.step-box{
    width: $box-width;
    height: $box-height;
    @include animate-spite-box($box-width);
}
复制代码

@keyframes

scss 函数

@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content;
  }
}

@mixin animate-spite-box($width: 134px) {
  background: url('https://uploads.codesandbox.io/uploads/user/abc364e4-ea65-4398-a1dc-df2645675b64/U59a-lightbulb.png') 0 0 no-repeat;
  background-size: cover;
  animation: spite-box 1s steps(4) infinite;
  @include keyframes(spite-box) {
    from {
      background-position: -8*$width;
     }
     to {
      background-position: -12*$width;
     }
  }
}

.step-box{
    width: 134px;
    height: 113px;
    @include animate-spite-box(134px);
}
复制代码

• 看看上面面的的 CodePen-demo

决定采用雪碧图和 step 帧动画来实现

• 根据设计提供的png图，制做雪碧图，使用了下面的网站,网站会自动计算出每张图的位置，而后咱们写在 background-postion 中，而后按照 demo 的方法完成咱们的帧动画就能够了。
• www.toptal.com/developers/…

一些知识点

css3 animate

• animate: step 逐帧动画
• animation-fill-mode: forwards; 动画完成后保持如今的样式
• animation-iteration-count: infinite 循环动画

参考

• developer.mozilla.org/zh-CN/docs/…
• www.jianshu.com/p/5c9844c25…
• segmentfault.com/a/119000002…