网络编程
位置:首页>> 网络编程>> JavaScript>> 基于JS实现Android,iOS一个手势动画效果

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

作者:AndButcher  发布时间:2024-04-28 09:36:41 

标签: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:"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
投稿

猜你喜欢

  • 1.前言Python中函数的参数类型比较丰富,比如我们经常见到*args和**kwargs作为参数。初学者遇到这个多少都有点懵逼,今天我们来
  • 正态分布(Normal distribution)又成为高斯分布(Gaussian distribution)若随机变量X服从一个数学期望为
  • jwt的问题首先说明一个jwt存在的问题,也就是要替换jwt的原因:jwt无法在服务端主动退出的问题jwt无法作废已颁布的令牌,只能等到令牌
  • 网上有这样一道题目:一个字符串String=“adadfdfseffserfefsefseetsdg”,找出里面出现次数最多的字母和出现的次
  • 想买mate40,但总是抢不到,所以想试着能不能写个脚本代码。第一步:把想要抢购的商品加进购物车,注意:脚本是对购物车内全部商品进行下单操作
  • 下面给大家介绍下小程序弹窗禁止页面滚动的效果:在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove但是如果弹
  • 基于OpenCV2.4.8和 python 2.7实现简单的手势识别。以下为基本步骤 1.去除背景,提取手的轮廓2. RGB->YUV
  • gRPC HTTP协议转换正当有这个需求的时候,就看到了这个实现姿势。源自coreos的一篇博客,转载到了grpc官方博客gRPC with
  • 视图:mysql中的视图,视图与表有很多相似的地方,视图也是由若干个字段以及若干条记录构成,视图也可以作为select语句的数据源。视图中保
  • 对于要搜索的元素越多,二分查找速度比简单查找快的更多 这是二分查找算法的优点,但二分算法也有缺点,二分算法只针对有序的列表,这样插入和删除就
  • 这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
  • 问题描述101/100,想要的结果是1,但是算出来的结果是1.01解决方案101 // 100结果图补充:python2 与 3:一般除法、
  • 前言Django 和 DRF(django rest framawork) 的结合在 python 后台中经常出现的组合。对于异常的全局处理
  • python去除文件中重复的行,我们可以设置一个一个空list,res_list,用来加入没有出现过的字符行!如果出现在res_list,我
  • 1. ref在Vue3中,ref成为了一个全家桶,除了用于创建响应式数据之外,还可以用于引用DOM元素、组件实例和其他对象。以下是ref的具
  • OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不
  • 目录1.随机取小数:2.整数的随机选取:3.随机列表取数,元素打乱:总结1.随机取小数:import randomprint(random.
  • ucky-canvas 介绍一个基于 Js + Canvas 的【大转盘 & 九宫格 & * 】抽奖, 致力于为 web
  • 一、python批量解压提示:如果是重要数据解压前请先备份,解压后会覆盖原压缩文件!!解压前:解压后:文件名为英文:文件名中包含中文:代码如
  • 导语轻松瘦 | 和闺蜜减肥的日常,谁说闺蜜是减肥路上的一座山?哈喽!大家好!我是木木子吖~小编有一个闺蜜,还是同一所学校读书毕业的,这体重在
手机版 网络编程 asp之家 www.aspxhome.com