目錄
(放個目錄方便預覽。知乎不支持目錄,這個目錄是從博客複製過來的,點擊會跳轉到博客)
這是《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); }
推薦閱讀: