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

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

  1. 浮入效果

头文件

enum CbwFloatDirection { // 浮入方向

cfdUp = 0, // 上浮

cfdDown = 1 // 下浮

};

/**

* @class TCbwAnimationEffect_ FloatIn

* @brief 动画基类

*

* 处理浮入动画效果

* @author 陈斌文

* @version 1.0

* @date 2015-03-05

* @QQ: 282397369

*/

class TCbwAnimationEffect_FloatIn : public TCbwAnimationEffect { // 浮入

virtual TRect __fastcall BuildDisplayRect(OBJECTMAT * m);

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

public:

__fastcall TCbwAnimationEffect_FloatIn();

static TCbwAnimationEffect * Build();

};

实现代码:

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

__fastcall TCbwAnimationEffect_FloatIn::TCbwAnimationEffect_FloatIn()

: TCbwAnimationEffect() {

EffectType = cetFloatIn;

}

TCbwAnimationEffect * TCbwAnimationEffect_FloatIn::Build() {

return new TCbwAnimationEffect_FloatIn;

}

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

TRect __fastcall TCbwAnimationEffect_FloatIn::BuildDisplayRect(OBJECTMAT * m) {

TPoint startPos(m->LeftTopPosition.x, m->LeftTopPosition.y),

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

int delta = 100;

if (cfdUp == EffectOptionType) // 上浮

startPos.y = endPos.y + delta;

if (cfdDown == EffectOptionType) // 下浮

startPos.y = endPos.y - delta;

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

/ FPeriodLength;

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

/ FPeriodLength;

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

return result;

}

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

void __fastcall TCbwAnimationEffect_FloatIn::BuildDisplayMat(cv::Mat& destMat,

cv::Mat& srcMat, TRect displayRect) {

InnerTrans_FadeOut(destMat, srcMat);

}

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

配置资源:

最终效果:

  1. 劈裂效果

头文件

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 : public TCbwAnimationEffect { // 劈裂

virtual void __fastcall BuildMaskMat(cv::Mat& destMat, cv::Mat& srcMat, TRect displayRect);

public:

__fastcall TCbwAnimationEffect_Split();

static TCbwAnimationEffect * Build();

};

实现代码:

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

__fastcall TCbwAnimationEffect_Split::TCbwAnimationEffect_Split()

: TCbwAnimationEffect() {

EffectType = cetSplit;

}

TCbwAnimationEffect * TCbwAnimationEffect_Split::Build() {

return new TCbwAnimationEffect_Split;

}

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

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

cv::Mat& srcMat, TRect displayRect) {

TRect wholeRect(0, 0, displayRect.right - displayRect.left,

displayRect.bottom - displayRect.top);

TRect partRect = wholeRect;

double cx = partRect.right / 2.0, cy = partRect.bottom / 2.0;

bool vertFlag = (EffectOptionType <= csdVertExpand);

double delta = 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;

}

bool expandFlag =

(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) {

bool hasValueFlag = (*pSrc++ != 0);

if (!hasValueFlag)

* pDst = 0;

int y = (row - partRect.top) * (partRect.bottom - row);

int x = (col - partRect.left) * (partRect.right - col);

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

if(!expandFlag)

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

bool setFlag = (inFlag == expandFlag);

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

}

}

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

配置资源

运行效果

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

时间: 2024-11-13 16:59:38

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

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

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

风火轮 – 动画效果

风火轮越来越有广告范,之前实现的素材导入功能已能解决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