基于JS實現(xiàn)Android,iOS一個手勢動畫效果
更新時間：2016年04月27日 09:42:39 作者：AndButcher
這篇文章主要介紹了基于JS實現(xiàn)Android,iOS一個手勢動畫效果 的相關(guān)資料,需要的朋友可以參考下
廢話不多說了，先給大家展示下效果圖：
這是iOS下的效果，android下完全一致。通過do_GestureView組件和do_Animation組件，deviceone能很容易實現(xiàn)復(fù)雜的跨平臺純原生動畫效果,這個示例就是通過手勢控制圖片上下動畫滑動實現(xiàn)開合效果，還支持聲音效果。
下面是主要的代碼
//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");
});
});
相關(guān)文章
使用JavaScript和HTML實現(xiàn)一個精美的計算器
計算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進行簡單的數(shù)學(xué)運算,在本博文中,我將使用JavaScript編寫一個漂亮的計算器,并添加加減乘除功能,感興趣的同學(xué)可以自己動手嘗試一下2023-09-09
項目中經(jīng)常會使用到表格，數(shù)據(jù)量大的時候還需要進行分頁，項目設(shè)計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
一篇文章教你用JavaScript使用流程控制打印九九乘法表
這篇文章主要為大家詳細介紹了JavaScript使用流程控制打印九九乘法表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
今天Test時發(fā)現(xiàn)一個小問題，上傳控件完成后，路徑還保留，為了清除，需要想一些辦法2013-07-07
這篇文章主要介紹了微信小程序五星評分效果實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要將為大家介紹一下JavaScript中遞歸與回溯的原理及使用，文中通過一些例題進行了詳細介紹，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
這篇文章主要介紹了RequireJS用法,結(jié)合簡單實例形式分析了RequireJS項目文件結(jié)構(gòu)、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-08-08
JS的繼承方式在我們面試的時候經(jīng)常會被問到，所以深入理解js繼承方式以及它們的優(yōu)缺點是非常有必要的。本文為大家整理了JavaScript中常見的七種繼承及實現(xiàn)，需要的可以參考一下2023-03-03
JS實現(xiàn)的圖片預(yù)覽插件與用法示例【不上傳圖片】
這篇文章主要介紹了JS實現(xiàn)的圖片預(yù)覽插件與用法,基于自定義插件uploadPreview.js實現(xiàn)圖片的預(yù)覽功能,不需要進行圖片的上傳,非常簡便實用,需要的朋友可以參考下2016-11-11
利用location.hash實現(xiàn)跨域iframe自適應(yīng)
其他一些類似js跨域操作問題也可以按這個思路去解決，需要的朋友可以測試下。2010-05-05