社区/学习指南/小程序云开发学习指南

渐变与动画

CSS 是编程科技与设计艺术结合得最为完美的一项技术,编程的优雅在于代码的清晰可读,而设计的优雅在于能够结合技术为用户带来一场视觉和交互的盛宴。借助于 CSS,不仅可以做出平面设计师常用的滤镜、渐变等设计效果,还可以设计出一些交互动画,增强用户的体验。

CSS 的渐变 Gradient

颜色渐变是设计师必不可少的,CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

技术文档:CSS 渐变属性 linear-gradient

使用开发者工具新建一个 gradient 的页面,然后在 gradient.wxml 页面输入以下代码:

<view class="gradient-display">
    </view>

在 gradient.wxss 里输入:

.gradient-display{
      background-image:linear-gradient(red, blue);
      width: 100vw;
      height: 100vh;
      }

.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }

我们发现因为背景图片使用了 linear-gradient 属性,它默认的渐变方向是从上到下,第一个颜色(这里为红色 red)是起始颜色,第二个颜色(这里为蓝色 blue)为停止颜色。

将.gradient-display 里的 backgound-image 的值依次换成以下:

改变渐变的方向
background-image: linear-gradient(45deg, blue, red);
    /* 渐变轴为45度,从蓝色渐变到红色 */

也可以这样写,代码具体含义可以去参考技术文档了解

background-image:linear-gradient(to left top, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */

增加更多颜色变换

background-image:linear-gradient(0deg, blue, green 40%, red);
    /* 从下到上(渐变轴为0度),从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

颜色百分比

background-image: linear-gradient(19deg, rgb(33, 212, 253) 0%, rgb(183, 33, 255) 100%);

小任务:参考径向渐变技术文档下面的 examples,在小程序里实现一个径向渐变的案例。通过实战的方式,理解技术文档就像辞典,前期学习不必做到全部看懂,能够拿来用就行。

Filter 滤镜

滤镜对于设计师来说一定不会陌生,CSS 也有滤镜 filter 属性,可以对图片进行高斯模糊、调整对比度、转换为灰度图像、色相旋转、图片透明等操作。

相比于 Photoshop 等工具的滤镜效果来说,使用 CSS 可以批量化处理图片滤镜效果,而且通过编程的手段不仅可以叠加各种效果,而且还能与交互相结合。

这里我们主要介绍用的最多的三个滤镜效果,高斯模糊 blur,图片变灰 grayscale(%),图片透明 opacity(%),其他滤镜效果大家以后可以阅读技术文档。

技术文档:滤镜属性

使用开发者工具新建一个 filter 页面,然后在 filter.wxml 输入:

<view class="filter-display">
        <view>blur高斯模糊</view>
        <image class="blur" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
        <view>grayscale图片变灰</view>
        <image class="grayscale" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
        <view>opacity图片透明</view>
        <image class="opacity" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
        <view>多个滤镜叠加,注意css的写法即可</view>
        <image class="multiple" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    </view>

然后在 filter.wxss 里输入:

    .filter-display img{
            width: 150px;height: auto;
        }
        .blur{
            filter: blur(8px);
        }
        .grayscale{
            filter: grayscale(90%);
        }
        .opacity{
            filter: opacity(25%);
        }
        .multiple{
            filter: blur(8px) grayscale(90%) opacity(25%);
        }

图片由灰色变为彩色

在实际应用中,会在网站上添加很多不同色系的图片,比如合作伙伴的 logo、嘉宾的照片、新闻图片等,为了让照片和网站的色系保持一致,因此就需要对所有图片进行统一的滤镜处理,而将图片变灰是比较常见的一种做法。

有时我们还会给这些变灰的图片添加一个交互特效,那就是当鼠标悬停在图片上时,图片会由灰色变为彩色。

在 filter.wxml 输入如下代码:

<view class="filter-display">
        <text>将鼠标悬停(模拟器)或手指(手机微信)按住或放开图片查看效果</text>
        <view class="grayscale" hover-class="grayscale-hover" >
          <image mode="widthFix"  src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
        </view>
    </view>

在技术文档 view 组件,我们可以看到 hover-class 是指定按下去的样式类。

在 filter.wxss 里添加如下样式:

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

高斯模糊的背景

高斯模糊是 UI 设计师经常用到的一个特效。平面设计师通常是人工、手动去给图片设计样式,而 UI 设计师则可以结合 CSS 给相同类别的所有图片添加统一的样式,比如我们希望每个用户信息页的背景、每篇文章顶部的背景都不一样。

在 filter.wxml 输入如下代码:

<view class="userinfo-display">
        <view class="blur-bg"></view>
        <view class="user-img">
            <image src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/luffy.jpg"></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 设计师在处理网页元素的设计时,不会像平面设计师一样可以对每个元素都差异化的精心雕琢,毕竟 CSS 是没法做到像 Photoshop 等设计工具那样复杂,但是他可以做到批量。所以相对于平面设计师而言,UI 设计师更注重单调且统一。

变形属性 Transform

CSS transform 属性能通过修改 CSS 视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定的组件。

关于变形 Transform、过渡 Transition、动画 Animation 的技术文档,大家先不要急着钻研,粗略浏览一下即可,以后有时间再来研究。

技术文档:CSS 变形属性 transform

使用微信开发者工具新建一个 transform 页面,在 transform.wxml 里输入以下代码

<view class="transform-display">
        <view>缩放,scale(x,y),x为长度缩放倍数,y为宽度缩放倍数,如果只有一个值,则是长和宽缩放的倍数</view>
        <image class="scale"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
        <view>平移,translate(x,y),x为x轴平移的距离,y为y轴平移的距离,如果只有一个值,则是x和y轴缩放的距离,值可以为负数</view>
        <image class="translate" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
       <view>旋转,rotate()里的值为旋转的角度</view>
       <image class="rotate"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
       <view>倾斜,skew()里的值为旋转的角度</view>
       <image class="skew"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></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 可以控制组件从一个属性状态切换为另外一个属性状态时的过渡效果。

技术文档:CSS 过渡属性 Transition

建议大家只用简写属性 transition,多个属性连着一起写会更好一些,transition 的语法如下,语法比较复杂,大家可以结合后面的实际案例

.selector {
        transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    }
  • transition-property,应用过渡的 CSS 或动画属性的名称;
  • transition-duration,整个过渡效果持续的时间,默认时间为 0 秒,所以要有过渡效果这个是必须定义的;
  • transition-timing-function,规定过渡效果的时间曲线,默认为 ease;
  • transition-delay,过渡效果延迟多久,或者说何时开始,默认为 0 秒,不定义的话也就是直接开始;

背景颜色的变化

同样还是把下面的代码输入到小程序的页面当中,通过实战的方式来查看效果。

使用开发者工具新建一个 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;
    }

动画是需要触发的,这里我们使用的是悬停 hover-class 来触发效果,把鼠标放在元素上 8 秒以上,看一下正方形的背景颜色有什么变化。

了解了效果之后,我们再来结合实际案例理解语法:

  • 因为我们是用 hover 来触发的,所以 transition 要写在元素的 hover-class 里,盒子之前的背景是绿色 green,悬停的背景是黄色 yellow;
  • 因为我们改变的是盒子 background-color,所以 transition 需要过渡的 CSS 属性名称,就是 background-color;
  • 动画过渡持续的时间,我们设置的是 5 秒,也就是背景由绿色变为黄色的时间;
  • 这里的 ease-out(慢速结束)是颜色过渡的时间曲线效果。还可以有 linear(匀速)、ease-in(慢速开始)、ease-in-out(慢速开始和慢速结束)。持续的时间很短的情况下,这几个时间曲线效果差别是及其细微的,需要设计师对动画足够敏感了。
  • 动画延迟的时间是 3 秒,也就是说 3 秒之后动画才开始。

技术文档:可设置动画的属性列表

我们来查看一个综合案例,在 transition.wxml 里输入

<view>
        <text>盒子的多个属性一起动画: width, height, background-color, transform. 将鼠标或手指悬停在盒子上查看动画之后放开。</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);
    }

动画属性 Animation

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

技术文档:CSS 动画属性 Animation

<view class="fadeIn">
     <view>注意会有一个无限颜色渐变变化的动画</view>
        <image mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
    </view>

在 wxss 里输入以下代码

@keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

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

CSS3 动画库 Animate.css

Animate.css 是一个有趣的,跨浏览器的 css3 动画库,只需要你引入一个 CSS 文件,就能够给指定的元素添加动画样式。

技术文档:Animate.css

它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 80 种动画效果,几乎包含了所有常见的动画效果。

小任务:参考 Animate.css 的 shake 抖动,在小程序实现一个组件抖动的案例。除了引入一些 weui 这样的样式框架,还有一些开源的库我们也可以学习和借鉴,更多内容则需要大家以后可以深入学习了。

本文出自 李东bbsky