基于JS实现Android,iOS一个手势动画效果

废话不多说了，先给大家展示下效果图：

这是iOS下的效果，android下完全一致。通过do_GestureView组件和do_Animation组件，deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果，还支持声音效果。

下面是主要的代码

//index.ui.js
var do_Animator1 = mm("do_Animator");
do_Animator1.append(500, {
y: -1334,
curve:"Linear"
});
var do_Animator2 = mm("do_Animator");
do_Animator2.append(500, {
y: 0,
curve:"Linear"
});
do_Page.on("NextPagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex++;
if (currentIndex>=json_define.length) currentIndex=0;
nextView=json_define[currentIndex].view;
for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
}
currentView.fire("closingBottom", "NextPagemove");
});
do_Page.on("NextPagemove", function(){
nextView.fire("initMoving", "NextPagemoved");
});
do_Page.on("NextPagemoved", function(){
currentView.y= 0;
nextView.y= 1332;
do_ALayout_main.y=0;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator1, function(){
nextView.fire("opening");
});
});
do_Page.on("PrePagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex--;
if (currentIndex<0) currentIndex=json_define.length -1;
nextView=json_define[currentIndex].view;
currentView.fire("closingHead", "PrePagemove");
});
do_Page.on("PrePagemove", function(){
nextView.fire("initMoving", "PrePagemoved");
});
do_Page.on("PrePagemoved", function(){
for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
}
currentView.y= 1332;
nextView.y= 0;
do_ALayout_main.y=-1334;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator2, function(){
nextView.fire("opening");
});
});
赞 (0)

相关推荐

  • IOS 七种手势操作（拖动、捏合、旋转、点按、长按、轻扫、自定义）详解及实例代码

    IOS 七种手势操作（拖动、捏合、旋转、点按、长按、轻扫、自定义）详解及实例代码

    IOS 七种手势操作 今天为大家介绍一下IOS 的七种手势,手势在开发中经常用到,所以就简单 通俗易懂的说下, 话不多说,直接看代码: 1.UIGestureRecognizer 介绍 手势识别在 iOS 中非常重要,他极大地提高了移动设备的使用便捷性. iOS 系统在 3.2 以后,他提供了一些常用的手势(UIGestureRecognizer 的子类),开发者可以直接使用他们进行手势操作. UIPanGestureRecognizer(拖动) UIPinchGestureRecognizer

  • IOS中的七种手势小结

    今天为大家介绍一下IOS 的七种手势,手势在开发中经常用到,所以就简单 通俗易懂的说下, 话不多说,直接看代码: // 初始化一个UIimageView UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 300, 300)]; imageView.image = [UIImage imageNamed:@"12.jpg"]; // UIImageView的用户交互是默认关闭的,

  • iOS轻点、触摸和手势代码开发

    一.响应者链 以UIResponder作为超类的任何类都是响应者.UIView和UIControl是UIReponder的子类,因此所有视图和所有控件都是响应者. 1.初始相应器 事件首先会传递给UIApplication对象,接下来会传递给应用程序的UIWindow,UIWindow会选择一个初始相应器来处理事件.初始响应器会选择下面的方式选择1.对于触摸事件,UIWindow会确定用户触摸的视图,然后将事件交给注册了这个视图的手势识别器或则注册视图层级更高的手势识别器.只要存在能处理事件的识

  • IOS 单击手势的添加实现代码

    IOS 单击手势的添加实现代码

    IOS 单击手势的添加实现代码 一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIGestureRecognizerDelegate> @end RootViewController.m #import "RootViewController.h" @interface RootV

  • iOS 用Swipe手势和动画实现循环播放图片示例

    iOS 用Swipe手势和动画实现循环播放图片示例

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的效果. 实现 在storyboard添加三个UIImageView,用来展示图片.而数组imageArray则用来保存图片对象. @interface ViewController () @property (strong, nonatomic) IBOutlet UIImageView *midd

  • IOS中各种手势操作实例代码

    IOS中各种手势操作实例代码

    先看下效果 手势相关的介绍 IOS中手势操作一般是 UIGestureRecognizer 类的几个手势子类去实现,一般我们用到的手势就这么5种: 1.点击  UITapGestureRecognizer 2.平移  UIPanGestureRecognizer 3.缩放  UIPinchGestureRecognizer 4.旋转  UIRotationGestureRecognizer 5.轻扫  UISwipeGestureRecognizer 我们上面这个实例中就用到了上面这5种手势,不

  • iOS手势的实现方法

    iOS手势的实现方法

    本文实例为大家分享了iOS手势的具体实现代码,供大家参考,具体内容如下 效果 细节 1.UITouch #import "ViewController_0.h" @interface ViewController_0 () @property (nonatomic, strong)UILabel *label; @end @implementation ViewController_0 - (void)viewDidLoad { [super viewDidLoad]; self.la

  • 使用Swift代码实现iOS手势解锁、指纹解锁实例详解

    使用Swift代码实现iOS手势解锁、指纹解锁实例详解

    一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB

  • iOS手势密码的实现方法

    iOS手势密码的实现方法

    本次讲的手势密码,是在九个按键上实现的,这里讲的是手势密码的基本实现和效果 同样先上效果图 其实就是对画图功能的一个实现,再加上手势操作结合起来. 屏幕宽度高度,方便下面操作,不做解释 #define ScreenHeight [[UIScreen mainScreen] bounds].size.height #define ScreenWidth [[UIScreen mainScreen] bounds].size.width 控制器.m文件 这里的imageView是用来装手势画图之后的

  • 基于JS实现Android,iOS一个手势动画效果

    基于JS实现Android,iOS一个手势动画效果

    废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • Android Flutter实现3D动画效果示例详解

    Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • Android Flutter实现GIF动画效果的方法详解

    Android Flutter实现GIF动画效果的方法详解

    目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF

  • vue基于websocket实现智能聊天及吸附动画效果

    vue基于websocket实现智能聊天及吸附动画效果

    目录 前言: 1.效果如下: 2.主要功能: 2.1.基于websocket实现聊天功能,封装了一个socket.js文件 2.2使用Jwchat插件实现类似QQ.微信电脑端的功能 2.3动画效果(如关闭打开时动画.吸附效果及其他效果) 3.实现步骤: 3.1.实现websocket聊天功能 3.2.在页面中的使用方法: 关闭连接 发送给后端的方法 4.使用Jwchat插件实现类似QQ.微信电脑端的功能 4.1步骤 5.动画效果 前言: 发现这篇文章写的有点多,我总结一下整体思路: 首先这个功能

  • IOS等待时动画效果的实现

    IOS等待时动画效果的实现

    查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 基于JS模仿windows文件按名称排序效果

    作个记录,主要是对数字的处理,如果数字的前面字符是相同的,则数字以值比较,而不是单个字符之间的比较. function SortLikeWin(v1, v2) { var a = v1.name; var b = v2.name; var reg = /[0-9]+/g; var lista = a.match(reg); var listb = b.match(reg); if (!lista || !listb) { return a.localeCompare(b); } for (var

  • Android Activity跳转动画效果

    Android Activity跳转动画效果

    Activity的跳转动画在5.0的时候做了一个重大的突破,下面来看一下吧 1.5.0之前的overridePendingTransition 相信大家对OverridePendingTransition还是很熟悉的,使用方法也是很简单就是 //fade_in是第二个界面的进入动画,fade_out是第一个界面退出动画,不想动画传入0  overridePendingTransition(R.anim.fade_in,R.anim.fade_out); fade_in : <?xml versi

  • Android实现红包雨动画效果

    Android实现红包雨动画效果

    本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { public float x, y; public float rotation; public float speed; public float rotationSpeed; public int width, height; public Bitmap bitmap; public int money;

随机推荐