Silverlight动画学习笔记(三):缓动函数
(一)定义:
缓动函数:可以将自定义算术公式应用于动画
(二)为什么要用缓动函数:
您可能希望某一对象逼真地弹回或其行为像弹簧一样。您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低。
(三)实例讲解:
<UserControl x:Class="AnimationStudy.EasingFunctionAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth=""> <StackPanel x:Name="LayoutRoot" Background="White">
<StackPanel.Resources>
<!--
缓动函数:
()EasingFunction属性:指定要应用于该动画的缓动函数
()EasingMode属性:更改缓动函数的行为方式(更改动画的内插方式:EaseIn、EaseOut、EaseInOut )
() EasingMode的三种内插方式:
EaseIn :内插遵循与缓动函数相关联的算术公式。
EaseOut :内插遵循 % 内插减去与缓动函数相关联的公式输出。
EaseInOut :内插将 EaseIn 用于动画的前半部分,将 EaseOut 用于动画的后半部分。
()缓动函数应用范围:
From/To/By 动画
关键帧动画
()常见的缓动函数:
BackEase :在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
BounceEase :创建弹回效果。
CircleEase :创建使用循环函数加速和/或减速的动画。
ElasticEase :创建表示弹簧在停止前来回振荡的动画。
SineEase :创建使用正弦公式加速和/或减速的动画。
ExponentialEase :创建使用指数公式加速和/或减速的动画。
【 PowerEase类动画】创建与使用 Power 属性的 CubicEase、QuadraticEase、QuarticEase 和 QuinticEase 的相同的行为
PowerEase :创建使用公式 f(t) = tp(其中,p 等于 Power 属性)加速和/或减速的动画。
CubicEase :创建使用公式 f(t) = t3 加速和/或减速的动画。
QuadraticEase :创建使用公式 f(t) = t2 加速和/或减速的动画。
QuarticEase :创建使用公式 f(t) = t4 加速和/或减速的动画。
QuinticEase :创建使用公式 f(t) = t5 加速和/或减速的动画。
()通过从 EasingFunctionBase 继承来创建自己的自定义缓动函数
覆盖 EaseInCore 方法,针对缓动函数的行为方式添加您自己的数学逻辑,如下代码:
namespace CustomEasingFunction
{
public class CustomSeventhPowerEasingFunction : EasingFunctionBase
{
public CustomSeventhPowerEasingFunction() : base()
{
}
protected override double EaseInCore(double normalizedTime)
{
return Math.Pow(normalizedTime, );
}
}
}
-->
<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Height"
Storyboard.TargetName="myRectangle">
<EasingDoubleKeyFrame Value="" KeyTime="00:00:02">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame> <EasingDoubleKeyFrame Value="" KeyTime="00:00:06">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase Bounces="" EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked"
Fill="Blue" Width="" Height="" />
</StackPanel>
</UserControl>
文章转自:http://www.cnblogs.com/Joetao/articles/2054250.html
Silverlight动画学习笔记(三):缓动函数的更多相关文章
- WPF中的动画——(四)缓动函数
缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...
- MySQL学习笔记(三):常用函数
一:字符串函数 需要注意的几个细节: 1.cancat中有一个字符串为null,则结果为null. 2.left(str,x) 和 right(str,x)中x为null,则不返回任何字符串,不是nu ...
- 支持xcode6的缓动函数Easing以及使用示例
支持xcode6的缓动函数Easing以及使用示例 用xcode6新建工程后,直接导致不支持之前的Easing缓动函数的代码,经过修改后就可以正常使用了,虽然比不上POP高大上的动画,但用缓动函数的动 ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- MYSQL学习笔记三:日期和时间函数
MYSQL学习笔记三:日期和时间函数 1. 获取当前日期的函数和获取当前时间的函数 /*获取当前日期的函数和获取当前时间的函数.将日期以'YYYY-MM-DD'或者'YYYYMMDD'格式返回 */ ...
- Android动画学习笔记-Android Animation
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
随机推荐
- ScrollView嵌套ListView的滑动冲突问题,是看大神的方法的,作为学习以后用的到
在工作中,曾多次碰到ScrollView嵌套ListView的问题,网上的解决方法有很多种,但是杂而不全.我试过很多种方法,它们各有利弊. 在这里我将会从使用ScrollView嵌套ListView结 ...
- Git_Windows 系统下Git安装图解
Windows 系统下Git安装图解 心得 :很成功~ 简单来说Git是一个免费的.开源的版本控制软件,从功能上讲,跟我们比较熟悉的Subversion(SVN)这类版本控制软件没什么两样.由于工 ...
- Gradle实战:发布aar包到maven仓库
查看原文:http://blog.csdn.net/u010818425/article/details/52441711 Gradle实战系列文章: <Gradle基本知识点与常用配置> ...
- viewflipper动画切换屏幕
整个项目的 package com.example.viewflipper; import android.R.integer; import android.app.Activity; import ...
- iOS开发libWeChatSDK.a(WXApiObject.o)' does not contain bitcode.
在使用微信分享的时候可能会报错, 报错如下: ld: '/Users/gti/Documents/********/Lib/SDKExport/libWeChatSDK.a(WXApiObject.o ...
- 使用Nginx SSI功能辅助HTML页面设计
SSI,Server Side Include,支持html静态文件内以 <!--#include file="/layout/header.html"--> 的方式 ...
- VMware系统运维(五)安装SSO vCenter Single Sign-On
1.前面我们做了很多准备工作,安装了很多需求部件,这时候再安装,必备条件无,这是简单安装,即自动安装,点击"安装". 2.简单安装,提示内存不足,需要4GB以上,加内存,重新安装. ...
- freeCodeCamp:Missing letters
从传递进来的字母序列中找到缺失的字母并返回它. 如果所有字母都在序列中,返回 undefined. function fearNotLetter(str) { var arr = str.split( ...
- Slickflow.NET 开源工作流引擎基础介绍(二) -- 引擎组件和业务模块的交互
集成流程引擎的必要性 业务过程的变化是在BPM系统中常见的现象,企业管理层需要不断优化组织架构,改造业务流程,不可避免地带来了业务流程的变化,企业信息系统就会随之面临重构的可能性.一种直接的方式是改造 ...
- Ubuntu 16.04 Vysor 破解 和黑屏问题解决+ 闪屏问题解决
最新破解更新说明: 参考本人blog: 点我呀 黑屏解决 Vysor使用和黑屏问题 经过了一段时间的艰辛探索,确定是我chrome的PNaCl没有安装,然后又是一段艰辛的Google之后,终于在一个链 ...