云開發(fā) 漸變與動(dòng)畫

在實(shí)際應(yīng)用中，會(huì)在網(wǎng)站上添加很多不同色系的圖片，比如合作伙伴的logo、嘉賓的照片、新聞圖片等，為了讓照片和網(wǎng)站的色系保持一致，因此就需要對(duì)所有圖片進(jìn)行統(tǒng)一的濾鏡處理，而將圖片變灰是比較常見的一種做法。

有時(shí)我們還會(huì)給這些變灰的圖片添加一個(gè)交互特效，那就是當(dāng)鼠標(biāo)懸停在圖片上時(shí)，圖片會(huì)由灰色變?yōu)椴噬?/p>

在filter.wxml輸入如下代碼:

<view class="filter-display">
        <text>將鼠標(biāo)懸停（模擬器）或手指（手機(jī)微信）按住或放開圖片查看效果</text>
        <view class="grayscale" hover-class="grayscale-hover" >
          <image mode="widthFix"  src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

在技術(shù)文檔view組件，我們可以看到hover-class是指定按下去的樣式類。

在filter.wxss里添加如下樣式：

.filter-display image{
      width: 150px;height: auto;
    }
    .grayscale{
      filter: grayscale(90%);
    }
    .grayscale-hover{
      filter:grayscale(0);
    }

高斯模糊的背景

高斯模糊是UI設(shè)計(jì)師經(jīng)常用到的一個(gè)特效。平面設(shè)計(jì)師通常是人工、手動(dòng)去給圖片設(shè)計(jì)樣式，而UI設(shè)計(jì)師則可以結(jié)合CSS給相同類別的所有圖片添加統(tǒng)一的樣式，比如我們希望每個(gè)用戶信息頁的背景、每篇文章頂部的背景都不一樣。

在filter.wxml輸入如下代碼:

<view class="userinfo-display">
        <view class="blur-bg"></view>
        <view class="user-img">
            <image src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

在filter.wxss里添加如下樣式：

.blur-bg {
        width: 750rpx;height: 300rpx;overflow: hidden;
        background: url(https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/blurimg.jpg);
        background-size: cover;
        position: fixed;
        filter: blur(15px);
        z-index: -1;   
    }
    .user-img{
        width: 750rpx;height: 300rpx;
        display: flex;
        justify-content: center; 
        align-items:center;   
    }
    .user-img image {
      width: 80rpx;height: 80rpx;
      border-radius: 100%;
      }

UI設(shè)計(jì)師在處理網(wǎng)頁元素的設(shè)計(jì)時(shí)，不會(huì)像平面設(shè)計(jì)師一樣可以對(duì)每個(gè)元素都差異化的精心雕琢，畢竟CSS是沒法做到像Photoshop等設(shè)計(jì)工具那樣復(fù)雜，但是他可以做到批量。所以相對(duì)于平面設(shè)計(jì)師而言，UI設(shè)計(jì)師更注重單調(diào)且統(tǒng)一。

變形屬性Transform

CSS transform屬性能通過修改CSS視覺格式化模型的坐標(biāo)空間旋轉(zhuǎn)、縮放、傾斜或平移給定的組件。

關(guān)于變形Transform、過渡Transition、動(dòng)畫Animation的技術(shù)文檔，大家先不要急著鉆研，粗略瀏覽一下即可，以后有時(shí)間再來研究。

技術(shù)文檔：CSS 變形屬性transform

使用微信開發(fā)者工具新建一個(gè)transform頁面，在transform.wxml里輸入以下代碼

<view class="transform-display">
        <view>縮放,scale(x,y)，x為長度縮放倍數(shù)，y為寬度縮放倍數(shù)，如果只有一個(gè)值，則是長和寬縮放的倍數(shù)</view>
        <image class="scale"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
        <view>平移,translate(x,y)，x為x軸平移的距離，y為y軸平移的距離，如果只有一個(gè)值，則是x和y軸縮放的距離，值可以為負(fù)數(shù)</view>
        <image class="translate" mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>旋轉(zhuǎn),rotate()里的值為旋轉(zhuǎn)的角度</view>
       <image class="rotate"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>傾斜,skew()里的值為旋轉(zhuǎn)的角度</view>
       <image class="skew"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

在transform.wxss文件里添加如下樣式：

.transform-display image{
      width: 80px;height: 80px;
      }
    .scale{
        transform: scale(1,0.5);
    }
    .translate{
        transform: translate(500px,20px);
    }
    .rotate{
        transform: rotate(45deg);
    }
    .skew{
        transform: skew(120deg);
    }

過渡屬性Transition

CSS transitions 可以控制組件從一個(gè)屬性狀態(tài)切換為另外一個(gè)屬性狀態(tài)時(shí)的過渡效果。

技術(shù)文檔：CSS 過渡屬性Transition

建議大家只用簡寫屬性transition，多個(gè)屬性連著一起寫會(huì)更好一些，transition的語法如下，語法比較復(fù)雜，大家可以結(jié)合后面的實(shí)際案例

.selector {
        transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    }

• transition-property，應(yīng)用過渡的 CSS 或動(dòng)畫屬性的名稱；
• transition-duration，整個(gè)過渡效果持續(xù)的時(shí)間，默認(rèn)時(shí)間為0秒，所以要有過渡效果這個(gè)是必須定義的；
  • transition-timing-function，規(guī)定過渡效果的時(shí)間曲線，默認(rèn)為ease；
  • transition-delay，過渡效果延遲多久，或者說何時(shí)開始，默認(rèn)為0秒，不定義的話也就是直接開始；

背景顏色的變化

同樣還是把下面的代碼輸入到小程序的頁面當(dāng)中，通過實(shí)戰(zhàn)的方式來查看效果。

使用開發(fā)者工具新建一個(gè)transition頁面，然后在transition.wxml頁面里面輸入以下代碼：

<view class="transition-display">
        <view class="box bg-color" hover-class="bg-color-hover"></view>
    </view>

然后在transition.wxss里面輸入：

.box{width: 150px;height: 150px;cursor: pointer;}
    .bg-color{
        background-color:green;
    }
    .bg-color-hover{
        background-color: yellow;
        transition: background-color 5s ease-out 3s;
    }

動(dòng)畫是需要觸發(fā)的，這里我們使用的是懸停hover-class來觸發(fā)效果，把鼠標(biāo)放在元素上8秒以上，看一下正方形的背景顏色有什么變化。

了解了效果之后，我們?cè)賮斫Y(jié)合實(shí)際案例理解語法：

• 因?yàn)槲覀兪怯胔over來觸發(fā)的，所以transition要寫在元素的hover-class里，盒子之前的背景是綠色green，懸停的背景是黃色yellow；
• 因?yàn)槲覀兏淖兊氖呛凶觔ackground-color，所以transition需要過渡的CSS屬性名稱，就是background-color；
• 動(dòng)畫過渡持續(xù)的時(shí)間，我們?cè)O(shè)置的是5秒，也就是背景由綠色變?yōu)辄S色的時(shí)間；
• 這里的ease-out（慢速結(jié)束）是顏色過渡的時(shí)間曲線效果。還可以有l(wèi)inear（勻速）、ease-in（慢速開始）、ease-in-out（慢速開始和慢速結(jié)束）。持續(xù)的時(shí)間很短的情況下，這幾個(gè)時(shí)間曲線效果差別是及其細(xì)微的，需要設(shè)計(jì)師對(duì)動(dòng)畫足夠敏感了。
• 動(dòng)畫延遲的時(shí)間是3秒，也就是說3秒之后動(dòng)畫才開始。

技術(shù)文檔：可設(shè)置動(dòng)畫的屬性列表

我們來查看一個(gè)綜合案例，在transition.wxml里輸入

<view>
        <text>盒子的多個(gè)屬性一起動(dòng)畫: width, height, background-color, transform. 將鼠標(biāo)或手指懸停在盒子上查看動(dòng)畫之后放開。</text>
        <view class="animatebox" hover-class="animatebox-hover"></view>
    </view>

在transition.wxss里輸入

.animatebox {
        display: block;
        width: 100px;
        height: 100px;
        background-color: #4a9d64;
        transition:width 2s, height 2s, background-color 2s, transform 2s;
    }
    .animatebox-hover {
        background-color: #cd584a;
        width:200px;
        height:200px;
        transform:rotate(180deg);
    }

動(dòng)畫屬性Animation

CSS animations 使得可以將從一個(gè)CSS樣式配置轉(zhuǎn)換到另一個(gè)CSS樣式配置。動(dòng)畫包括兩個(gè)部分:描述動(dòng)畫的樣式規(guī)則和用于指定動(dòng)畫開始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。

技術(shù)文檔：CSS動(dòng)畫屬性Animation

<view class="fadeIn">
     <view>注意會(huì)有一個(gè)無限顏色漸變變化的動(dòng)畫</view>
        <image mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

在wxss里輸入以下代碼

@keyframes fadeIn {
      from {
        opacity: 0;
      }

    
      to {
        opacity: 1;
      }
    }

    
    .fadeIn {
      animation: 4s linear 0s infinite alternate fadeIn;
    }

CSS3 動(dòng)畫庫 Animate.css

Animate.css是一個(gè)有趣的，跨瀏覽器的css3動(dòng)畫庫，只需要你引入一個(gè)CSS文件，就能夠給指定的元素添加動(dòng)畫樣式。

技術(shù)文檔：Animate.css

它預(yù)設(shè)了抖動(dòng)（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá) 80種動(dòng)畫效果，幾乎包含了所有常見的動(dòng)畫效果。

小任務(wù)：參考Animate.css的shake抖動(dòng)，在小程序?qū)崿F(xiàn)一個(gè)組件抖動(dòng)的案例。除了引入一些weui這樣的樣式框架，還有一些開源的庫我們也可以學(xué)習(xí)和借鑒，更多內(nèi)容則需要大家以后可以深入學(xué)習(xí)了。