IT学习站-137zw.com

more +资源更新Forums

more +随机图赏Gallery

价值3600元的中文网第八期php cms 视频 完整版视频课程价值3600元的中文网第八期php cms 视频 完整版视频课程
10节课让你成为滚床单高手  强烈推荐 屌丝的福音10节课让你成为滚床单高手 强烈推荐 屌丝的福音
价值5980元高端JAVA架构课程 精英培训计划视频教程 java架构价值5980元高端JAVA架构课程 精英培训计划视频教程 java架构
最新流出的传智博学谷黑马python5.0课程最新流出的传智博学谷黑马python5.0课程
价值19000元的小码哥大神班IOS五期不加密版本教程价值19000元的小码哥大神班IOS五期不加密版本教程
从网络基础概念到校园网整体规划组建系列视频教程(共40集)从网络基础概念到校园网整体规划组建系列视频教程(共40集)

[UWP]使用CompositionAPI的翻转动画

[UWP]使用CompositionAPI的翻转动画

[复制链接]
dxf17 | 显示全部楼层 发表于: 2019-11-14 10:55:01
dxf17 发表于: 2019-11-14 10:55:01 | 显示全部楼层 |阅读模式
查看: 64|回复: 0
1. 运行效果

[UWP]使用CompositionAPI的翻转动画  技术博客 38937-20191112163636933-754637324

使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效果如上所示,还用到了弹簧动画,可以看到翻转后有点回弹。本来打算自己这个动画效果写的,但火火已经写好了这个FlipSide控件,Github地址在这里,这篇文章就介绍下这个控件的部分原理。
2. TransformMatrix

Visual的 TransformMatrix 属性是一个 Matrix4x4 的struct,它是应用于元素的转换矩阵,可以进行动画处理。它的默认值如下:
[UWP]使用CompositionAPI的翻转动画  技术博客 38937-20191112162913285-248111107

这时候动画效果如下:
[UWP]使用CompositionAPI的翻转动画  技术博客 38937-20191112164052468-756344629

要使Visual可以正确旋转需要按以下方式处理:讲真我也不明白为什么要这么写,只知道是从微软的 例子 里抄的。每当SizeChanged事件发生时都需要调用这个函数重新设置TransformMatrix。
3. RotationAngleInDegrees

Visual包含两个相似的属性,RotationAngleInDegreesRotationAngle,它们的定义如下:这两个属性都用于控制Visua围绕着RotationAxis和CenterPoint旋转。在FlipSide这个控件里RotationAngleInDegrees比较适用:这段代码用到了SpringAnimatin,所以有弹一下的效果。
4. RotationAxis

RotationAxis 用于指定Visual旋转的轴。FlipSide可以通过设置RotationAxis改变翻转的角度,例如火火的Demo里使用根据鼠标改变RotationAxis:
[UWP]使用CompositionAPI的翻转动画  技术博客 38937-20191112164207237-393370128

5. ExpressionAnimation
上面XAML为FlipSide的调用代码,它将Side1和Side2(这个命名超让高达迷兴奋)作为内容显示在UI上,当IsFlipped为False时显示Side1的内容,当IsFlipped为True时代表翻转过去,此时显示Side2的内容。在翻转动画的过程中,何时隐藏Side1并显示Side2是个麻烦事。幸好UWP有强大的表达式动画(ExpressionAnimation),FlipSide只用了下面几句代码处理这个问题:这段代码的意思是当Side1的RotationAngleInDegrees大于90度时隐藏,否则显示;Side2则相反。其中,表达式中的this.Target表示使用这个表达式动画的Vsual。
表达式动画的话题很大,这篇文章就割爱了,可以参考下面给出的链接了解更多内容:
基于关系的动画 - Windows UWP applications Microsoft Docs
【Win 10 应用开发】UI Composition 札记(七):基于表达式的动画 - 东邪独孤 - 博客园
6. 结语

感谢火火提供了这个控件,让我可以省下了不少功夫。其实我对TransformMatrix真的不理解,所以这部分只是用,没办法详细介绍。而且我以前对UI里使用3D不感兴趣,所以这方面真的没法写更多内容。期待火火为这方面补充一些博客。
7. 参考

基于关系的动画 - Windows UWP applications Microsoft Docs
【Win 10 应用开发】UI Composition 札记(七):基于表达式的动画 - 东邪独孤 - 博客园
ExpressionAnimation Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
Visual.TransformMatrix Property (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
合成视觉对象 - Windows UWP applications Microsoft Docs
XAML 属性动画 - Windows UWP applications Microsoft Docs
8. 源码

cnbluefire_FlipSide

来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-12 00:42 , Processed in 0.205359 second(s), 33 queries .

快速回复 返回顶部 返回列表