风火轮 – 动画效果:浮入与劈裂

今天花了一个半小时,实现两个动画效果:浮入与劈裂。

1.  浮入效果

头文件

enum CbwFloatDirection { // 浮入方向

cfdUp= 0, // 上浮

cfdDown= 1 // 下浮

};

/**

*@class TCbwAnimationEffect_ FloatIn

*@brief 动画基类

*

* 处理浮入动画效果

*@author 陈斌文

*@version 1.0

*@date 2015-03-05

*@QQ: 282397369

*/

class TCbwAnimationEffect_FloatIn : publicTCbwAnimationEffect { // 浮入

virtualTRect __fastcall BuildDisplayRect(OBJECTMAT * m);

virtualvoid __fastcall BuildDisplayMat(cv::Mat& destMat, cv::Mat& srcMat,TRect displayRect);

public:

__fastcallTCbwAnimationEffect_FloatIn();

staticTCbwAnimationEffect * Build();

};

实现代码:

// ***************************** 浮入效果**************************************

__fastcallTCbwAnimationEffect_FloatIn::TCbwAnimationEffect_FloatIn()

:TCbwAnimationEffect() {

EffectType= cetFloatIn;

}

TCbwAnimationEffect *TCbwAnimationEffect_FloatIn::Build() {

returnnew TCbwAnimationEffect_FloatIn;

}

浮入过程中,位置将渐次变化,重载BuildDisplayRect处理:

TRect __fastcallTCbwAnimationEffect_FloatIn::BuildDisplayRect(OBJECTMAT * m) {

TPointstartPos(m->LeftTopPosition.x, m->LeftTopPosition.y),

endPos(m->LeftTopPosition.x,m->LeftTopPosition.y);

intdelta = 100;

if(cfdUp == EffectOptionType) // 上浮

startPos.y= endPos.y + delta;

if(cfdDown == EffectOptionType) // 下浮

startPos.y= endPos.y - delta;

intx = startPos.x + (endPos.x - startPos.x) * (FCurrentIndex + 1)

/FPeriodLength;

inty = startPos.y + (endPos.y - startPos.y) * (FCurrentIndex + 1)

/FPeriodLength;

TRectresult(x, y, x + m->Mat.cols, y + m->Mat.rows);

returnresult;

}

为了更增加动画效果,可以在变换过程中加入对像素的控制,即淡出效果

void __fastcallTCbwAnimationEffect_FloatIn::BuildDisplayMat(cv::Mat& destMat,

cv::Mat&srcMat, TRect displayRect) {

InnerTrans_FadeOut(destMat,srcMat);

}

// ***************************** 浮入效果**************************************

配置资源:

最终效果:

2.  劈裂效果

头文件

enum CbwSplitDirection { // 劈裂方向

csdVertCollapse= 0, // 上下向中央收缩

csdVertExpand= 1, // 中央向上下展开

csdHorzCollapse= 2, // 左右向中央收缩

csdHorzExpand= 3 // 中央向左右展开

};

/**

*@class TCbwAnimationEffect_Split

*@brief 动画基类

*

* 处理浮入动画效果

*@author 陈斌文

*@version 1.0

*@date 2015-03-05

*@QQ: 282397369

*/

class TCbwAnimationEffect_Split : publicTCbwAnimationEffect { // 劈裂

virtualvoid __fastcall BuildMaskMat(cv::Mat& destMat, cv::Mat& srcMat, TRectdisplayRect);

public:

__fastcallTCbwAnimationEffect_Split();

staticTCbwAnimationEffect * Build();

};

实现代码:

// ***************************** 劈裂效果**************************************

__fastcallTCbwAnimationEffect_Split::TCbwAnimationEffect_Split()

:TCbwAnimationEffect() {

EffectType= cetSplit;

}

TCbwAnimationEffect *TCbwAnimationEffect_Split::Build() {

returnnew TCbwAnimationEffect_Split;

}

劈裂过程,可通过控制屏蔽矩阵来达到效果,即控制将拷贝的区域

void __fastcall TCbwAnimationEffect_Split::BuildMaskMat(cv::Mat&destMat,

cv::Mat&srcMat, TRect displayRect) {

TRectwholeRect(0, 0, displayRect.right - displayRect.left,

displayRect.bottom- displayRect.top);

TRectpartRect = wholeRect;

doublecx = partRect.right / 2.0, cy = partRect.bottom / 2.0;

boolvertFlag = (EffectOptionType <= csdVertExpand);

doubledelta = double(FCurrentIndex + 1) / FPeriodLength * (vertFlag ?

cy: cx);

if(csdVertExpand == EffectOptionType) { // 上下向中央收缩

partRect.top= cy - delta;

partRect.bottom= cy + delta;

}

if(csdVertCollapse == EffectOptionType) { // 中央向上下展开

partRect.top= delta;

partRect.bottom= 2 * cy - delta;

}

if(csdHorzExpand == EffectOptionType) { // 左右向中央收缩

partRect.left= cx - delta;

partRect.right= cx + delta;

}

if(csdHorzCollapse == EffectOptionType) { // 中央向左右展开

partRect.left= delta;

partRect.right= 2 * cx - delta;

}

boolexpandFlag =

(csdVertExpand== EffectOptionType ||

csdHorzExpand== EffectOptionType);

BYTE* pSrc = srcMat.data;

BYTE* pDst = destMat.data;

for(int row = 0; row < destMat.rows; ++row)

for(int col = 0; col < destMat.cols; ++col) {

boolhasValueFlag = (*pSrc++ != 0);

if(!hasValueFlag)

*pDst = 0;

inty = (row - partRect.top) * (partRect.bottom - row);

intx = (col - partRect.left) * (partRect.right - col);

boolinFlag = (y >= 0 && x >= 0);

if(!expandFlag)

inFlag= (y > 0 && x > 0);

boolsetFlag = (inFlag == expandFlag);

*pDst++= (setFlag ? 255 : 0);

}

}

// ***************************** 劈裂效果**************************************

配置资源

运行效果

回头再看一下,PPT中大概还有40个效果,如果按每天2个效果来实现的话,需要20天。加油。

时间: 2024-10-10 20:29:33

风火轮 – 动画效果:浮入与劈裂的相关文章

风火轮 –动画效果:浮入与劈裂

今天花了一个半小时,实现两个动画效果:浮入与劈裂. 浮入效果 头文件 enum CbwFloatDirection { // 浮入方向 cfdUp = 0, // 上浮 cfdDown = 1 // 下浮 }; /** * @class TCbwAnimationEffect_ FloatIn * @brief 动画基类 * * 处理浮入动画效果 * @author 陈斌文 * @version 1.0 * @date 2015-03-05 * @QQ: 282397369 */ class T

风火轮 – 动画效果

风火轮越来越有广告范,之前实现的素材导入功能已能解决50%的用户需求,即可以拖入现成的动画.视频及图片素材,效果见QQ空间之前的某篇日志. 从进化发展角度来看,现在的很多产品,纯硬件的竞争已是薄利见血,软件功能提升才是王道. 所以,软件实现得加强.电子黑板如此,风火轮也如此. 准备实现动画效果. 闭门造车是白手起家的最脑残做法,所以先放眼成熟产品,看哪些功能与UI可以借鉴. 做素材,一般会选取FLASH.Photoshop,而动画效果,PPT是大家耳熟能详的. 仔细研究一下,决定采用PPT的界面

风火轮 –动画效果:擦除、形状、轮子、随机线条、翻转远近、缩放、旋转、弹跳效果

今天再花了一个白天时间,把PPT动画的进入效果全部实现. 浮入效果 头文件 class TCbwAnimationEffect_Erase : public TCbwAnimationEffect { // 擦除 virtual void __fastcall BuildMaskMat(cv::Mat& destMat, cv::Mat& srcMat, TRect displayRect); public: __fastcall TCbwAnimationEffect_Erase();

风火轮 – 飞入动画效果

在动画基类的基础上,再实现各种动画效果,只需专注于各种逻辑实现,倒也不是太难的事. 今天实现第二个动画效果-飞入. 1.  飞入效果 代码很少,因为只需要确定不同时间的位置,故只重载BuildDisplayRect: 头文件 /** *@class TCbwAnimationEffect_ FlyIn *@brief 动画基类 * * 处理飞入动画效果 *@author 陈斌文 *@version 1.0 *@date 2015-03-04 *@QQ: 282397369 */ class TC

jquery 动画效果插件

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)eas

实现逐帧动画和补间动画两种动画效果

1.逐帧动画(Frame Animation)通常在Android项目的res/drawable/目录下面定义逐帧动画的XML模板文件.编码的时候,需要在动画模板文件的<animation-list>标签中依次放入需要播放的图片,并设置好播放的间隔时间. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"

数往知来 JQuery3_动画效果 &lt;二十三&gt;

一.节点替换 $('br').replaceWhith('<hr/>')  表示选取页面的所有br元素替换成<hr /> $('<hr />').replaceAll('br');  这是表示动态创建一个<hr />元素,然后用该元素替换页面上所有的br元素 2)节点包裹 $('p').wrap('<font color=red ></font>');  把每一个选中的P元素,外部都包裹一个font标签 $('p').wrapAll(

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

CABasicAnimation学习Demo 包含了一些经常使用的动画效果

个人写的一些样例: // // ViewController.m // CABasicAnimationDemo // // Created by haotian on 14-6-13. // Copyright (c) 2014年 Baseus. All rights reserved. // #import "ViewController.h" @interface ViewController () @end @implementation ViewController @syn