This example shows how to use a TSwipeTransitionEffect transition and a TPathAnimation to simulate the turning of a book page.

1. To build and test this example, create a HD FireMonkey Application - Delphi, then add the next objects to the form:
2. Load a bitmap to the TImage and select the Target and Back bitmaps for the TSwipeTransitionEffect.
3. Add the following code to the OnClick event handlers of the image:

Code

procedure TForm1.Image1Click(Sender: TObject);
begin
PathAnimation1.Enabled := False;
SelectionPoint1.Position.Point := PointF(0,0);
SelectionPoint1.Opacity := 0;
PathAnimation1.Parent := SelectionPoint1;
PathAnimation1.Path.Clear;
// begin Path for mouse pointer
PathAnimation1.Path.MoveTo(PointF(0,0));
PathAnimation1.Path.LineTo(PointF(Form1.Width/2,Form1.Height/2));
PathAnimation1.Path.LineTo(PointF(Form1.Width*2,0));
// end
PathAnimation1.Duration := 2;
PathAnimation1.Start;
end;
4. Add the following code to the OnFinish and OnProcess event handlers of the TPathAnimation:

Code

procedure TForm1.PathAnimation1Finish(Sender: TObject);
var
BitMap : TBitmap;
begin
BitMap := TBitmap.Create(0,0);
BitMap.Assign(SwipeTransitionEffect1.Target);
SwipeTransitionEffect1.Target := Image1.Bitmap;
Image1.Bitmap.Assign(BitMap);
SwipeTransitionEffect1.MousePoint := PointF(0,0);
end;
 
procedure TForm1.PathAnimation1Process(Sender: TObject);
begin
SwipeTransitionEffect1.MousePoint:=SelectionPoint1.Position.Point;
end;

The image will swipe its bitmap on every mouse click. The next image shows the resulting animation:

http://docwiki.embarcadero.com/CodeExamples/XE6/en/FMX.TSwipeTransitionEffect_Animation

翻书的效果:FMX.TSwipeTransitionEffect Animation的更多相关文章

  1. [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  2. css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  3. Andorid 翻书效果

    本文内容 项目结构 环境 演示 参考资料 翻书效果,主要采用绘制贝塞尔曲线的方法.本文有三个演示: 简单翻书效果.翻下一页后,当前页不会消失. 翻书时的贝塞尔曲线.演示翻书时,贝塞尔曲线的路径和要素. ...

  4. CSS3、jQuery实现3D翻书动画

    使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...

  5. PPT中翻书动画的制作

    一.新建一个空白的PowerPoint文档.   二.制作两个页面:   1.点击“自选图形”右边的小三角,选择“基本图形”下的“折角形”图形,在PowerPoint中画出一个书页样的图形,宽度最好小 ...

  6. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  7. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  8. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  9. Unity3d:megaFierstext(翻书效果插件)

    附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...

随机推荐

  1. HTML5 drawImage 使用问题

    使用Image遇到的问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Android的线程和线程池

    ---恢复内容开始--- 一.Android线程的形态 (一)AsyncTask解析 AysncTask简介:①.实现上封装了Thread和Handler   ②.不适合进行特别耗时的后台任务 Ays ...

  3. UVa230 Borrowers (STL)

     Borrowers  I mean your borrowers of books - those mutilators of collections, spoilers of the symmet ...

  4. NDK 的helloworld步奏

    1. helloworld.c #include <string.h> #include <jni.h> /* * Class: com_example_ndk_NativeH ...

  5. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...

  6. Nginx 配置指令的执行顺序(一)

    大多数 Nginx 新手都会频繁遇到这样一个困惑,那就是当同一个 location 配置块使用了多个 Nginx 模块的配置指令时,这些指令的执行顺序很可能会跟它们的书写顺序大相径庭.于是许多人选择了 ...

  7. Nginx Upload Module 上传模块

    传统站点在处理文件上传请求时,普遍使用后端编程语言处理,如:Java.PHP.Python.Ruby等.今天给大家介绍Nginx的一个模块,Upload Module上传模块,此模块的原理是先把用户上 ...

  8. iOS Xcode工程目录的 folder 和 group的区别(蓝色和黄色文件夹的区别)

    1. 来自 http://blog.csdn.net/fanjunxi1990/article/details/9352917 XCode工程目录里面,有时你会发现2个不同颜色的文件夹,一种是蓝色的, ...

  9. 【学习总结】autostart 与 init

    学习总结/etc/xdg/autostart/xxx.desktop,是开机从登录界面跳转到桌面启动的,可以拿到桌面环境变量,用户id是“普通用户”,如果自启动的程序文件所属者为root,则需要 执行 ...

  10. Wireshark入门与进阶系列(二)

    摘自http://blog.csdn.net/howeverpf/article/details/40743705 Wireshark入门与进阶系列(二) “君子生非异也,善假于物也”---荀子 本文 ...