界面左进右出,右进左出特效

 


left_in
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="-100%" android:toXDelta="0" android:duration="500"> </translate> left_out <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="0" android:toXDelta="-100%" android:duration="500"> </translate> right_in <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="100%" android:toXDelta="0" android:duration="500"> </translate> right_out <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="0" android:toXDelta="100%" android:duration="500"> </translate>
public class SetupGuide2Activity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_setup_guide2);
    }
    
    public void next(View v) {
        startActivity(new Intent(this, SetupGuide3Activity.class));
        overridePendingTransition(R.anim.right_in, R.anim.left_out);
    }
    
    public void pre(View v) {
        finish();
        overridePendingTransition(R.anim.left_in, R.anim.right_out);
    }
}

 

转载于:https://www.cnblogs.com/znsongshu/p/9365363.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个效果,可以使用小程序原生的组件 wx-swiper 和 wx-animation。 1. 在页面中使用 wx-swiper 创建一个轮播图容器,将侧边栏的内容作为轮播图的其中一项。 2. 通过 wx-animation 创建一个动画,将轮播图容器向右移动,即可以实现从右边滑出的效果。 下面是一个简单的示例代码: ```html <view class="page"> <view class="content"> <!-- 主要内容 --> </view> <swiper class="sidebar" current="0" duration="300" easing="linear" vertical="true"> <swiper-item class="sidebar-item"> <!-- 侧边栏内容 --> </swiper-item> </swiper> </view> ``` ```css .page { display: flex; width: 100%; height: 100%; overflow: hidden; } .content { flex-grow: 1; width: 100%; height: 100%; } .sidebar { position: fixed; right: -80%; /* 初始时侧边栏在页面右侧外部 */ top: 0; width: 80%; height: 100%; z-index: 999; background-color: #fff; } .sidebar-item { height: 100%; } .sidebar-enter-active, .sidebar-leave-active { transition: transform 0.3s; } .sidebar-enter, .sidebar-leave-to { transform: translateX(-80%); } ``` ```javascript Page({ data: { sidebarOpened: false }, toggleSidebar() { const animation = wx.createAnimation({ duration: 300, timingFunction: 'linear' }) if (this.data.sidebarOpened) { animation.translateX('-80%').step() this.setData({ sidebarOpened: false, sidebarAnimationData: animation.export() }) } else { animation.translateX('0').step() this.setData({ sidebarOpened: true, sidebarAnimationData: animation.export() }) } } }) ``` 其中,toggleSidebar 函数用于切换侧边栏的显示状态,当侧边栏已经打开时,将其向右移动隐藏;当侧边栏未打开时,将其向左移动显示。sidebarOpened 和 sidebarAnimationData 是用于绑定组件状态和动画数据的变量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值