css3 animate 幀動畫和雪碧圖-完成一個盒子打開動畫

時間 2019-11-16

標籤 css3 css animate 動畫雪碧完成一個盒子打開欄目 CSS 简体版

原文原文鏈接

寫在最前面

最近作一個關於抽獎活動的項目，會涉及到不少動畫，這裏來探討一下 scss 函數和 css 動畫的製做

需求：如圖

一個打開的盒子，其中有許多不規則的星星✨不規則的運動動，看着這個複雜的動畫，我不由周冬雨附身--小黃鴨眉頭一皺.gif。
已經很久沒寫動畫的我該如何入手，在僅限的 css 知識中知道 animate 動畫。

思考

一、盒子彈跳動畫
二、光幕出現，陰影的出現動畫
三、蓋子不規則飛行
四、星星不規則飛行

實現

一、transform: scaleY() translate() 實現盒子彈跳
二、opacity 實現光幕和陰影
三、transform: rotateZ() 蓋子飛行,翻轉
四、top left transform: translate() 星星運動

大概的思路都有了開始動手css

// 盒子居中佈局
.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');
}

複製代碼

思考

寫到這裏時候發現代碼量會不少，即便用函數的形式，複寫動畫路徑，具體實現中，發現效果並很差也不能徹底復刻設計給的動畫。html
而後 google 了一下動畫的實現方法，發現了幀動畫，和雪碧圖。雖然這兩個知識點早就據說過，可是使用的時候都是分開使用的。結合起來的時候也能作動畫效果，說作就作，先寫一個 democss3
htmlsegmentfault

<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);
}
複製代碼