目錄

(放個目錄方便預覽。知乎不支持目錄，這個目錄是從博客複製過來的，點擊會跳轉到博客)

  • 簡介
  • 關於文章
  • 溶解效果預覽
  • 實現原理

簡介

這是《Qml特效-進場動畫》系列文章的第12篇，濤哥將會教大家一些Qml進場動畫相關的知識。

進場動畫效果 參考了WPS版ppt的動畫，基本效果已經全部實現，可以到github TaoQuick項目中預覽：

進場動畫預覽

關於文章

文章主要發布在濤哥的博客 和 濤哥的知乎專欄-Qt進階之路

溶解效果預覽

溶解效果

實現原理

通過數值動畫，控制百分比屬性percent從0 到100變化

import QtQuick 2.12
import QtQuick.Controls 2.12
ShaderEffect {
...
property int percent: 0
opacity: percent > 0 ? 1 : 0
NumberAnimation {
id: animation
target: r
property: "percent"
from: 0
to: 100
alwaysRunToEnd: true
loops: 1
duration: 1000
}
...
}

溶解效果的shader比較簡單，關鍵是需要一張單通道過渡變化的紋理，用作採樣。

類似這樣的圖片:

可以在google上搜索關鍵詞：」溶解 紋理」。

在Shader中，使用glsl片段著色器實現像素的控制：

in vec2 qt_TexCoord0;
uniform float qt_Opacity;
uniform sampler2D effectSource;
uniform sampler2D dissolveSource;
uniform int percent;
out vec4 fragColor;
void main()
{
vec4 color = texture2D(effectSource, qt_TexCoord0);
vec4 dcolor = texture2D(dissolveSource, qt_TexCoord0);
float alpha = 1.0 - step(float(percent) / 100.0, dcolor.r);
alpha *= qt_Opacity;
fragColor = vec4(color.rgb * alpha, alpha);
}

推薦閱讀：

相關文章