filter+transition实现点亮图片效果

预期效果

最近我在朋友圈看到一篇文章，关于疫情结束，点亮一张张图片的过程，图片由黑白逐渐变得色彩缤纷，看起来效果非常不错。

实现方式

实现方式非常简单，不难推断出用filter和transition可以完成这一效果，filter 用于控制颜色和明亮度，而 transition 则控制这一变化的过渡效果。

源代码

此处采用 vue2.x 的写法。

<template>
  <div
    @click="lightImg"
    :class="['card-gray', { 'card-lightful': isLightful }]"
  ></div>
</template>

<script>
export default {
  name: "lightYouImage",
  data() {
    return {
      isLightful: false
    };
  },
  methods: {
    lightImg() {
      this.isLightful = !this.isLightful;
    }
  }
};
</script>

<style lang="less" scoped>
.card-gray {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px auto;
  background: url(http://pic.netbian.com/uploads/allimg/170915/191948-1505474388c138.jpg)
    center center/cover no-repeat;
  filter: grayscale(1) brightness(50%);
}

.card-lightful {
  filter: none;
  transition: filter 1s ease-in;
}
</style>

效果预览

出于各种原因，暂无法使用个人电脑，只能简单截个静态图片。以下依次为点亮前和点亮后的效果。

需要注意的点

1. transition上设置的效果是作用在当前类名下的指定属性的，且该属性的值为变化后的值，它需要对应一个变化前的值，才能看到效果。

2. grayscale 控制元素灰度，灰度>=1 表示纯灰，为 0 表示原彩；brightness 控制元素亮度，为 0 表示纯黑，为 1 表示正常亮度，大于 1 表示高于正常亮度，类似于照片中的“过曝”。

3. ease是“放松”的意思，在 css 的 timing-function 中，它表示慢速，常见的有如下几种：

值	含义
ease-in	缓慢进入，匀速进行和结束
ease-out	匀速进入和进行，缓慢结束
ease-in-out	缓慢进入，匀速进行，缓慢结束
linear	全程匀速进行

4. transition 可以设置多组效果，不同组之间用逗号隔开，如下：

    transition: filter 1s ease-in, width 1.5s ease-out;