向上滑动飞进来SlidingUpPanelLayout

<!--带滑动的控件 需要用直接复制整个布局即可 -->
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoDragView="@+id/frameLayout_up"
    sothree:umanoOverlay="true"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoParallaxOffset="100dp"
    sothree:umanoShadowHeight="4dp">

    <FrameLayout
        android:id="@+id/frameLayout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <FrameLayout
        android:id="@+id/frameLayout_up"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

public class MainActivity extends BaseActivity implements PanelSlideListener, View.OnTouchListener{
    private ViewHolder holder;
    private Context mContext;
    private static final String MAINFRAGMENT_TAG = "MainFragment";
    private static final String SLIDINGFRAGMENT_TAG = "SlidingFragment";
    private float mDown;    //按下时的Y坐标
    private float mMove;    //移动后的Y坐标
    private int diff;   //偏移量
    private int navigateHeight = 160; //底部导航栏的高度

    private class ViewHolder{
        SlidingUpPanelLayout sliding_layout;
        FrameLayout frameLayout_main;
        FrameLayout frameLayout_up;
    }

    public void init_View(){
        holder = new ViewHolder();
        holder.frameLayout_main = findViewByIds(R.id.frameLayout_main);
        holder.frameLayout_up = findViewByIds(R.id.frameLayout_up);
        holder.sliding_layout = findViewByIds(R.id.sliding_layout);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = this;
        init_View();
        init_data();
    }

    private void init_data(){
        holder.sliding_layout.setPanelHeight(0);
        init_fragment();
        init_event();
    }

    private void init_event(){
        holder.sliding_layout.addPanelSlideListener(this);
        holder.frameLayout_main.setOnTouchListener(this);
    }

    private void init_fragment(){
        FragmentManager manager = getFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.frameLayout_main, new MainFragment(mContext), MAINFRAGMENT_TAG);
        transaction.replace(R.id.frameLayout_up, new SlidingFragment(mContext), SLIDINGFRAGMENT_TAG);
        transaction.commit();
    }

    //滑动布局 添加addPanelSlideListener的回调方法。
    @Override
    public void onPanelSlide(View panel, float slideOffset) {
        holder.sliding_layout.scrollTo(0, 0);   //避免滑动fragment滑动后展示全频时向上移导致底下少了一部分
    }

    @Override
    public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {

    }

    //主界面fragment 监听onTouchListener的回调方法
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                mDown = event.getY();   //获取按下时候的纵坐标
                Log.e("seven", "mDown:"+ mDown);
                break;
            case MotionEvent.ACTION_MOVE:
                mMove = event.getY();   //获取移动的纵坐标,滑动时候每次只有几十
                diff = (int)(mDown - mMove);
                if (holder.sliding_layout.getScrollY() + diff > navigateHeight){//holder.sliding_layout.getScrollY()表示滑动后离左上角0,0坐标的Y坐标偏移量
                    holder.sliding_layout.scrollTo(0, navigateHeight);  //判断Y偏移量加上每次滑动的偏移量是否大于底下导航的高度
                }else if (holder.sliding_layout.getScrollY() + diff < 0){
                    holder.sliding_layout.scrollTo(0, 0);
                }else {
                    holder.sliding_layout.scrollBy(0, diff);
                }
                break;
            case MotionEvent.ACTION_UP:
                //滑动松开后判断Y偏移量和位移偏移量是否大于底部导航的2分之1高度。
                if (holder.sliding_layout.getScrollY() + diff > navigateHeight/2){
                    holder.sliding_layout.scrollTo(0, navigateHeight);
                }else {
                    holder.sliding_layout.scrollTo(0, 0);
                }
                break;
        }
        return true;    //只使用onTouchListener的情况下,需要返回true,否则监听只监听到down,后面的动作就监听不到了。
    }
}



### 回答1: 对于您的问题,可以通过CSS3中的动画属性来实现页面文字向上滑动特效。具体步骤如下: 1. 在CSS中定义一个动画,指定动画名称、持续时间、动画效果等属性,如下所示: @keyframes slide-up { from { transform: translateY(0); } to { transform: translateY(-100%); } } 2. 在需要应用动画的元素上添加样式,指定动画名称、持续时间、动画效果等属性,如下所示: .slide-up { animation: slide-up 1s ease-in-out forwards; } 其中,animation属性中的forwards属性用于使动画结束后元素保持最后一个关键帧的状态,也就是保持在向上滑动的最终位置。 通过上述步骤,即可实现页面文字向上滑动的特效。 ### 回答2: 滑动页面文字向上滑动特效是一种常见的网页设计效果,可以让网页看起来更加动态和有趣。实现这个特效的方法有很多种,下面我给出一个简单的实现思路。 首先,我们需要使用HTML和CSS来创建一个基本的页面结构。在HTML中,我们可以使用`<div>`或其他元素来包含我们要滑动的文字。在CSS中,我们可以为这个元素设置宽度、高度、背景颜色等样式属性。 接下来,我们需要使用JavaScript来实现滑动效果。我们可以监听用户滚动事件,并根据滚动的位置和方向,通过改变元素的位置属性来实现滑动效果。具体地,我们可以使用`window.pageYOffset`来获得用户滚动的垂直位置,然后根据这个值来改变元素的`top`属性,实现向上滑动的效果。 例如,我们可以通过监听`scroll`事件来触发一个函数,该函数会将滚动位置乘以一个系数,然后将结果设置为元素的`top`属性。这样,无论用户向上还是向下滚动,元素都会根据滚动的距离移动相应的位置。 当然,如果我们想要更加复杂和炫目的滑动效果,可以使用CSS动画来实现。我们可以定义一个动画,将元素从初始位置移到预定位置,并设置动画的持续时间和过渡效果。然后,当触发滚动事件时,我们可以通过为元素添加和移除CSS类来启动和停止动画。 总之,滑动页面文字向上滑动特效可以通过结合HTML、CSS和JavaScript来实现。使用JavaScript可以监听滚动事件,并通过改变元素的位置属性来实现滑动效果,而使用CSS动画可以实现更加复杂和炫目的效果。这样,我们就可以为网页添加一个动态和有趣的滑动特效。 ### 回答3: 滑动页面文字向上滑动特效指的是在网页或手机应用中,将页面上的文字以一定速度向上滑动的动态效果。 实现这种特效的方法有很多种,可以通过CSS、JavaScript或者jQuery等技术实现。下面我介绍一种常见的实现方式。 首先,在HTML中创建一个包含需要滑动的文字的容器,可以是一个div元素: ```html <div id="scrolling-text-container"> <p>这里是需要滑动的文字内容。</p> </div> ``` 接下来,在CSS中设置容器和文字的样式,包括文字颜色、大小、字体等属性,并将容器设置为固定高度和隐藏溢出: ```css #scrolling-text-container { height: 100px; overflow: hidden; } #scrolling-text-container p { font-size: 16px; color: #000; font-family: Arial, sans-serif; } ``` 然后,使用JavaScript或jQuery来控制文字的滑动效果。这里以JavaScript为例: ```javascript var container = document.getElementById("scrolling-text-container"); var text = container.getElementsByTagName("p")[0]; var speed = 50; // 滑动速度,单位为像素/秒 var delay = 2000; // 停留时间,单位为毫秒 function scrollUp() { container.scrollTop++; if (container.scrollTop >= text.offsetHeight) { container.scrollTop = 0; } } var scrollInterval = setInterval(scrollUp, speed); container.onmouseenter = function() { clearInterval(scrollInterval); } container.onmouseleave = function() { scrollInterval = setInterval(scrollUp, speed); } setTimeout(function() { clearInterval(scrollInterval); }, delay); ``` 以上代码中,首先通过getElementById和getElementsByTagName获取到容器和文字的元素,然后使用scrollTop属性来控制滑动效果。通过不断递增scrollTop的值,达到滑动的效果。当文字滑动到容器底部时,将scrollTop重置为0,实现文字的循环滚动。还通过添加鼠标事件和定时器来控制文字的暂停和停止。 通过以上的CSS和JavaScript代码,便可以实现滑动页面文字向上滑动的特效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值