上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下

新建项目,添加一个Button和Image

在Page里定义资源

 <Storyboard x:Key="std" x:Name="std" RepeatBehavior="Forever" AutoReverse="True">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="Resources/teemo_1.png" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Resources/teemo_2.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Resources/teemo_3.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="Resources/teemo_4.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Resources/teemo_5.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="Resources/teemo_6.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="Resources/teemo_7.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="Resources/teemo_8.png"/> </ObjectAnimationUsingKeyFrames> </Storyboard>

然后给Button添加点击事件

处理点击事件 播放动画

private void Button_Click(object sender, RoutedEventArgs e)
{
//
std.Begin();
}

然后看看帧率

如果我们用Task去卡住UI线程的话,动画就会停止

private void Button_Click_1(object sender, RoutedEventArgs e)
{
Task.Delay().Wait();
}

这样我们可知帧动画其实是运行在UI线程上的

然后我有新建了另一个故事板

直接把每个帧的的Value属性变为BitmapImage对象

        <BitmapImage x:Key="key1" UriSource="Resources/teemo_1.png"/>
<BitmapImage x:Key="key2" UriSource="Resources/teemo_2.png"/>
<BitmapImage x:Key="key3" UriSource="Resources/teemo_3.png"/>
<BitmapImage x:Key="key4" UriSource="Resources/teemo_4.png"/>
<BitmapImage x:Key="key5" UriSource="Resources/teemo_5.png"/>
<BitmapImage x:Key="key6" UriSource="Resources/teemo_6.png"/>
<BitmapImage x:Key="key7" UriSource="Resources/teemo_7.png"/>
<BitmapImage x:Key="key8" UriSource="Resources/teemo_8.png"/>
<Storyboard x:Key="std2" x:Name="std2" RepeatBehavior="Forever" AutoReverse="True">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image2" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource key1}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource key2}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource key3}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource key4}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource key5}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{StaticResource key6}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{StaticResource key7}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{StaticResource key8}"/>
</ObjectAnimationUsingKeyFrames> </Storyboard>

点击按钮开始故事板

 private void Button_Click_2(object sender, RoutedEventArgs e)
{
std2.Begin();
}

再来看看效果

同样,如果卡住UI的话,动画肯定是不会运行的

那么我们再来看看用Timer实现的帧率

从帧率上来看,第一种方式很明显帧率高很多,稳定在60左右,第二种和Timer实现的一样,帧率在9左右,我看不懂这个,但第一种方式的实现总给我一种图片在闪的感觉,期望有大手子指点一下。

@lindexi_gd

gayhub地址:https://github.com/hei12138/LOLSecond

新手,写的不好的地方请多指教

欢迎交流1329698854@qq.com

uwp 图片切换动画 使用帧动画的更多相关文章

  1. 3d图片切换(css3帧动画)

    效果带抖动翻转隐藏,使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  2. [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  3. Android动画(一)-视图动画与帧动画

    项目中好久没用过动画了,所以关于动画的知识都忘光了.知识总是不用则忘.正好最近的版本要添加比较炫酷的动画效果,所以也借着这个机会,写博客来整理和总结关于动画的一些知识.也方便自己今后的查阅. Andr ...

  4. Android开发——View动画、帧动画和属性动画详解

    0. 前言   Android动画是面试的时候经常被问到的话题.我们都知道Android动画分为三类:View动画.帧动画和属性动画. 先对这三种动画做一个概述: View动画是一种渐进式动画,通过图 ...

  5. uwp 图片切换动画

    最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...

  6. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  7. android 学习随笔二十四(动画:帧动画)

    帧动画,一张张图片不断的切换,形成动画效果 * 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长 * FrameAnimatio ...

  8. CSS动画-step()帧动画

    Twitter使用了一种新的动画形式,使用一系列的图片来创建帧动画. 下面是一个❤动画,鼠标移动到上面开始绽放. .heart { width: 100px; height: 100px; backg ...

  9. 过渡与动画 - 逐帧动画&steps调速函数

    写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

随机推荐

  1. 如何在EF中实现left join(左联接)查询

    在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...

  2. unity3D项目中如何避免硬代码(C#)

    平时做项目,代码中是不允许出现硬代码的,一般我们是怎么处理的呢? 那么硬代码又是什么呢? 我们俗称的硬代码:eg:   label.text = "欢迎来到梦幻岛";  这样我们俗 ...

  3. java cookie 工具类

    package com.xxx.xxx.xxx.xxx; import java.net.URLDecoder; import java.net.URLEncoder; import javax.se ...

  4. 无法连接虚拟设别 ide1:0.

    安装虚拟机时出现提示:无法连接虚拟设备 ide1:0,因为主机上没有相应的设备.您要在每次开启此虚拟机时都尝试连接此虚拟设备吗? ide1:0一般是虚拟机的光驱,配置选项是“使用物理驱动器”,而宿主机 ...

  5. 配置python环境变量(转)

    默认情况下,在windows下安装python之后,系统并不会自动添加相应的环境变量.此时不能在命令行直接使用python命令. 1.首先需要在系统中注册python环境变量:假设python的安装路 ...

  6. python 使用__neg__和__iter__

    __neg__ python中 __neg__ 方法对应于 符号 - 可见 str 没有__neg__,定义 strnew 好吧,无法再简化了 __iter__ 看看 list 的 __iter__: ...

  7. java 过滤器Filter

    一.首先在web.xml里进行拦截过滤 <filter>        <filter-name>platformServiceAgreementFilter</filt ...

  8. WUI 前端组件

    为什么会有WUI前端组件,我们接触的UI组件如:YUI.EXTjs.EasyUI,这些组件虽然提供了丰富的UI,并且一定程度上缩短了开始时间,单这些组件提供的页面风格是统一的,我们的产品风格不可能像这 ...

  9. CI框架,源代码一次性判断获取post(get)数据是否有某个字段值为空方法

    一.以下是CI框架 1.把所有的要接收的字段放在数组中 例: 我要接收:id,name,age,mobile 等字段 $req = array('id','name','age','mobile'); ...

  10. STOMP协议介绍

    STOMP,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息 ...