发帖 回复
返回列表
  • 1927阅读
  • 1回复

Qml特效4-进场动画-对角线 [复制链接]

 上一主题 下一主题
离线dd759378563
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2019-06-09
Qml特效4-进场动画-对角线
目录
(放个目录方便预览。这个目录是从博客复制过来的，点击会跳转到博客)


简介

这是《Qml特效-进场动画》系列文章的第4篇，涛哥将会教大家一些Qml进场动画相关的知识。
进场动画效果 参考了WPS版ppt的动画，基本效果已经全部实现，可以到github TaoQuick项目中预览：
进场动画预览


关于文章

文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路


效果预览

对角线效果，支持从四个方向出现





实现原理

通过数值动画，控制百分比属性percent从0 到100变化
复制代码
  1. //ADiagonal.qml
  2. import QtQuick 2.12
  3. import QtQuick.Controls 2.12
  4. ShaderEffect {
  5.     ...
  6.     //枚举声明四种方向
  7.     enum Direct {
  8.         FromLeftTop = 0,
  9.         FromRightTop = 1,
  10.         FromLeftBottom = 2,
  11.         FromRightBottom = 3
  12.     }
  13.     property int dir: ASlowEnter.Direct.FromLeft
  14.     property int percent: 0
  15.     opacity: percent > 0 ? 1 : 0
  16.     NumberAnimation {
  17.         id: animation
  18.         target: r
  19.         property: "percent"
  20.         from: 0
  21.         to: 100
  22.         alwaysRunToEnd: true
  23.         loops: 1
  24.         duration: 1000
  25.     }
  26.     ...
  27. }



在Shader中，使用片段着色器实现像素的控制：
复制代码
  1. in vec2 qt_TexCoord0;
  2. uniform float qt_Opacity;
  3. uniform sampler2D effectSource;
  4. uniform int dir;
  5. uniform int percent;
  6. out vec4 fragColor;
  7. void main()
  8. {
  9.     vec4 color = texture2D(effectSource, qt_TexCoord0);
  10.     float p = float(percent) / 100.0f;
  11.     float ps[] = float[](2.0f * p - qt_TexCoord0.x - qt_TexCoord0.y,
  12.                         qt_TexCoord0.y - (1.0f - 2.0f *(1.0 -  p)) - qt_TexCoord0.x,
  13.                         qt_TexCoord0.x + (1.0f - 2.0f * p) - qt_TexCoord0.y,
  14.                         qt_TexCoord0.y - 2.0f * (1.0 - p) + qt_TexCoord0.x);
  15.     float alpha = step(0, ps[dir]);
  16.     float alphas[] = float[](alpha, 1.0f - alpha, 1.0f - alpha, alpha);
  17.     alpha = alphas[dir];
  18.     fragColor = vec4(color.rgb * alpha, alpha);
  19. }
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线big_mouse
禁止发言
只看该作者 1楼 发表于: 2020-04-14
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个