精华内容
下载资源
问答
  • 手机端的交互体验越来越重要,因为好的体验能吸引用户的使用,...加载动效有别于平时的加载动效,使加载过程更加生趣。 体检动效 html代码这一块,都是一些简单排版,详细代码可自行查看下。 本文的实例都...

    手机端的交互体验越来越重要,因为好的体验能吸引用户的使用,提高用户的愉悦感;本文主要实现三个交互体验:

    体验动效类似防护软件的数据校验,使校验数据的过程更生动,而不单调;

    数据滚动条动效是打开页面的时候,对数据显示百分比做了一个滚动条动效;

    加载动效有别于平时的加载动效,使加载过程更加生趣。

    体检动效

    html代码这一块,都是一些简单排版,详细代码可自行查看下图。

    本文的实例都是由css代码实现,所以这一块是本文的重点,实现过程的详细步骤如下(主要分析跟动态效果有关的代码):

    1.新建@keyframes规则(round),用于外框旋转(0%表示开始、50%表示中间、100%表示最后,可根据实际情况修改旋转角度和修改百分比);

    2.默认状态下:

    外框(i)设置了透明度(opacity)为0(不显示),且左右两边的边框颜色(border-left、border-right)不一样,使旋转的效果更炫;

    分别对三个外框设置了动画animation(引用round),为了让校验比较逼真,设置第一个外框匀速旋转2s,第二个延迟2s后匀速旋转2s,第三个延迟4s匀速旋转2s。

    3.打开网页后:  

    根据设置的动画,会先旋转第一个外框,2s后旋转完消失,接着旋转第二个,2s后旋转完消失,最后旋转第三个外框2s后消失。

    数据滚动条动效

    html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。

    数据滚动条动效是利用animate()方法中逐渐改变的功能来实现,详细代码如下图:

    该动效是有一个滚动条慢慢增加的过程,所以对宽度(width)设置逐渐改变;

    为了使过程更协调,设置了动画时间1s(1000)。

    加载动效

    html代码这一块,都是一些简单排版,详细代码可自行查看下图。

    本文的实例都是由css代码实现,所以这一块是本文的重点,实现过程的详细步骤如下(主要分析跟动态效果有关的代码):

    1.新建@keyframes规则(load),用于竖线Y轴缩放(0%、40%、100%缩小到0.2倍,20%还原到原大小,可根据实际情况修改缩放比例和修改百分比,改造属于自己的加载动效);

    2.默认状态下:

    竖线(i)缩小到0.2倍(scaleY(0.2)),且设置了动画animation(引用load),执行1.5s并无限循环;

    分别对后四个设置延迟时间,为了让加载更有层次感,延迟时间分别为0.1s、0.2s、0.3和0.4。

    3.打开网页后:  

    根据设置的动画,会从左到右,一根根竖线慢慢放大缩小,一直循环。

    注意事项

    该例子使用了单位vw,自适应于各种分辨率的手机端。

    展开全文
  • 但是今天看见一个用Axure做的柱状的载入动效,其实看起来很简单,打算自己尝试做一下,结果,断断续续花了差不多3个多小时才达到那个载入效果,里面一个坑,觉得人也会遇到,所以还是记录一下实现过程。...

    工作中有用到Axure  RP画原型,虽然原型没有要求必须做交互动效,但是今天看见一个用Axure做的柱状图的载入动效,其实看起来很简单,打算自己尝试做一下,结果,断断续续花了差不多3个多小时才达到那个载入效果,里面有一个坑,觉得有人也会遇到,所以还是记录一下实现过程。

    我首先画了静态的柱状图,然后在网上百度了一下怎么做动效,网上说给每个柱子设置载入动效》设置尺寸》设置参数,然后调整柱子的高度到最低,预览就可以看见动效了,感觉蛮简单的,所以开始自己照着操作。

    1、画静态柱状图

    2、给每个柱子设置载入动效,动效如下图。柱子宽和高不变,就按柱子本来的高度。

    3、将每个柱子高度调低。

    4、预览后,为什么柱子上下变模糊了?????别人的不是这样的啊,难道我的步骤有问题,我又重新按照步骤做了一遍,还是模糊。


    我猜测是不是要将柱子转为动态面板再设置载入动效,所以先将柱子转换成动态面板后,针对面板设置载入动效》设置尺寸》设置参数,然后调整面板的高度到最低,预览后,看着效果接近80%,有一点瑕疵,就是别人是从一个圆角型往上生长的效果,我做的感觉是从土里面生长起来的,主要是底部那个圆角最后才显示,就很奇怪,搞不懂别人到底是怎么做的。

    别人做的效果:         

    我采用动态面板做的效果:


    在网上百度也没有找到相应的教程,感觉自己操作也没有问题,但是为什么效果有差呢。按F12看了看别人的原型页面代码,柱子是div展示的,然后看了看我做的第一个柱状图原型,柱子竟然是图片,怪不得载入完拉伸变模糊了,可是我采用的元件是矩形,怎么变图片了呢。

    别人做的原型预览后HTML代码:

    我做的原型预览后HTML代码:


    现在要测试找问题所在了:
    1、重新拉一个矩形,不改颜色,不改边框,直接设置载入动效,预览后就是我要的那种动效,按F12发现是div展示。

    中间效果:加载完:
    2、改矩形的背景颜色并去掉边框,预览后又变模糊了,按F12发现div变图片了,继续排查是背景有影响还是边框。

    中间效果:加载完:
    3、重新拉一个矩形,添加颜色,不动边框,直接设置载入动效,预览后是正确的,按F12是div展示,那背景颜色是不影响的。

    中间效果:加载完:
    4、直接改边框颜色,预览后也是正确的,改边框颜色不影响。

    中间效果:加载完:
    5、去掉边框,再预览,就变模糊了,按F12发现是图片。

    中间效果:加载完:

     

    所以矩形去掉边框颜色,预览后,在HTML里面是图片,我只要把柱状图的柱子边框改成白色,而不是去掉边框,将边框颜色与背景色同色,预览后,达到了别人的那种效果,总算把效果做出来了。

    最后的效果:

     

    最后再说一点,因为我上面操作拉矩形,都是用的矩形1(一般我都用矩形1,不需要边框我就去掉边框),如果我直接拉矩形2来绘制,是不需要改边框的,按照上面的操作步骤可以一步到位。

    折腾了几个小时,也算是一个小经验。

    展开全文
  • 滑动内联动效 指的是 在容器滑动的过程中,其子View对应展现出来的一些效果。而图片平行逆差效果,就是在容器滑动过程中,图片也跟着移动的效果。语言太苍白,直接上效果。 上面图片还带了透明度的变化,但这不是...

    本文属于滑动内联动效系列的第一篇。仓库地址

    滑动内联动效 指的是 在容器滑动的过程中,其子View对应展现出来的一些效果。而图片平行逆差效果,就是在容器滑动过程中,图片也跟着移动的效果。语言太苍白,直接上效果。

    单张图片的item

    图文混排的逆差效果

    上面图片还带了透明度的变化,但这不是本文的描述范围。
    想要提前看整体实现,请直接移步到github仓库

    图片平行逆差效果早见于网络,常见思路有两种:
    1- 继承滑动容器或者在滑动容器的监听器里做文章
    比如ScrollParallexListview..xxRecyclerview..xxParallex等命名的,github上比较好找。这类实现适用性比较单一,换种滑动容器的时候可能就会失效或者bug一堆。而且实现较为复杂,动效改动/添加会比较麻烦。

    2- 自定义ImageView
    这类实现也是比较常见的实现方式,其优点是可移植性高,在很多地方只要用这个ImageView即可实现平行逆差效果。但是这种方式也具有一些缺点,a-裁剪,这种方式具有天生的缺陷,即当ImageView最初设置layoutparams,在不改变固有比例的情况下,其很可能会被裁剪,具体裁剪规则参见ScaleType属性。b-适用范围小,只适用于图片,特别是有一些其它动画,如缩放和透明度变化时。

    本文思路–包装容器(container)

    熟悉ScrollBy方法的童鞋知道,其实所有的View都是可滑动的,只是滑动容器(比如ListView)滑动时,动的是子View,非滑动容器(TextView)滑动时,动的是其文本内容。总体来看,所有的view都可滑动,滑动时,动的都是其内容。由此得到灵感,将ImageView放到一个非滑动容器(container)中,那么ImageView将不会被裁剪,而平行逆差效果,却能由这个container的滑动来实现。这样做,既会保留自定义ImageView的高的移植性,又能避免图片被裁剪,而且容器不只滑动,它还能缩放,透明度或者旋转等等效果,使得动画的添加也很方便。
    注意:包装容器不应该是常规的滑动容器。

    方案分析:

    • 1 获得外面滑动容器的滑动事件。
      因为是做滑动内联效果,那么理应得到滑动事件才行。一般的滑动监听接口是不行了,因为我们要做的是兼容多种滑动容器。此时,我们选用的是ViewTreeObserver.OnScrollChangedListener,这接口非常通用,几乎所有可滑动视图体系都会引起它的调用。有接口了,什么时候注册接口呢,当然是view添加到window时啦,此时view的方法onAttachedToWindow开始发挥作用。

    • 2 得到滑动容器的位置范围。
      这个滑动容器可大可小,滑动内联效果肯定是与这个有关系的。假设有个点,刚好位于滑动容器的最下边。当滑动进行时,这个点便会跟着向下移动,当其到滑动容器最上边时,这个点刚好走了滑动容器的上下距离。这个过程,也代表了比较理想的内联动效的起始和最终位置。

    • 3 确定包装容器和图片的内联滑动
      滑动开始了,也知道什么时候内联滑动开始了,那么包装容器和图片应该怎么内联呢。用个图片来标示吧,直观。

    包装容器和图片的内联滑动

    好了,方案分析完了。终于到上代码的时候了。

    代码实现

    • 图片需要保持自身比例,而且不能被容器大小限制或者裁剪,那么这个ImageView就需要重写下测量方法。整体比较简单,就是设定了水平滑动或者纵向滑动。其宽高由滑动方向和图片固有的宽高决定。
    public class AdjointImageView extends ImageView {
        private boolean isVertical = true;
        public AdjointImageView(Context context) {
            this(context, null);
        }
        public AdjointImageView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
        public AdjointImageView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AdjointContainer);
            isVertical = typedArray.getBoolean(R.styleable.AdjointContainer_isVertical, true);
            typedArray.recycle();
        }
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            if (getDrawable() == null) {
                super.onMeasure(widthMeasureSpec, heightMeasureSpec);
                return;
            }
            if (isVertical) {
                int width = MeasureSpec.getSize(widthMeasureSpec);
                int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
                setMeasuredDimension(width, height);
            } else {
                int height = MeasureSpec.getSize(heightMeasureSpec);
                int width = height * getDrawable().getIntrinsicWidth() / getDrawable().getIntrinsicHeight();
                setMeasuredDimension(width, height);
            }
        }
    }
    • 重点,包装容器的实现
    public class AdjointContainer extends RelativeLayout implements ViewTreeObserver.OnScrollChangedListener {
        private boolean enableScrollParallax = true;
        private int[] viewLocation = new int[2];//自身位置
        //特效集合
        private List<AdjointStyle> mAdjointStyles = new ArrayList<>();
        //滑动容器的范围,矩形
        private Rect parentLocation = new Rect();//parent list rect
        //方便获得滑动容器范围
        private Locator mLocator;
        public AdjointContainer(Context context) {
            super(context);
            init();
        }
        public AdjointContainer(Context context,  AttributeSet attrs) {
            super(context, attrs);
            init();
        }
        public AdjointContainer(Context context,  AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
        private void init() {
            //为了使invalidate调用onDraw方法
            setBackgroundColor(0x0000);
        }
        @Override
        protected void onAttachedToWindow() {
            super.onAttachedToWindow();
            getViewTreeObserver().addOnScrollChangedListener(this);
        }
        @Override
        protected void onDetachedFromWindow() {
            getViewTreeObserver().removeOnScrollChangedListener(this);
            super.onDetachedFromWindow();
        }
        //增加动效  
        public void addStyle(AdjointStyle aAdjointStyle) {
            mAdjointStyles.add(aAdjointStyle);
        }
        public void removeStyle(AdjointStyle aAdjointStyle) {
            mAdjointStyles.remove(aAdjointStyle);
        }
        public void clearStyles(){
            mAdjointStyles.clear();
        }
        @Override
        protected void onDraw(Canvas canvas) {
            if (mLocator != null) {
                parentLocation = mLocator.getLocation();
            }
            if (!enableScrollParallax || parentLocation==null||parentLocation.bottom == 0) {
                super.onDraw(canvas);
                return;
            }
            getLocationInWindow(viewLocation);
            for (int i = 0; i < mAdjointStyles.size(); i++) {
                mAdjointStyles.get(i).transform(this, canvas, viewLocation, parentLocation);
            }
            super.onDraw(canvas);
        }
        public void setLocator(Locator aLocator) {
            mLocator = aLocator;
        }
        @Override
        public void onScrollChanged() {
            if (enableScrollParallax) {
                invalidate();
                requestLayout();
            }
        }
    }

    容器做的工作主要有,接收滑动事件,确定滑动位置,增/删动效,通知动效对象执行动效。而动效对象的添加,是通过策略模式和观察者模式来实现。

    • 纵向平行逆差效果
    
    public class VerticalMoveStyle implements AdjointStyle {
        @Override
        public void onAttachedToImageView(AdjointContainer view) {
        }
        @Override
        public void onDetachedFromImageView(AdjointContainer view) {
        }
        @Override
        public void transform(AdjointContainer aContainer, Canvas canvas, int[] viewLocation, Rect parentLocation) {
            if (aContainer.getChildCount() != 1) {
                return;
            }
            if (aContainer.getChildAt(0) instanceof AdjointImageView) {
                ALog.single().ld("transform-begin");
                AdjointImageView childView = (AdjointImageView) aContainer.getChildAt(0);
                Drawable drawable = (childView).getDrawable();
                int iWidth = drawable.getIntrinsicWidth();
                int iHeight = drawable.getIntrinsicHeight();
                int y = viewLocation[1];
                int ptop = parentLocation.top;
                int pbottom = parentLocation.bottom;
                ALog.single().ld("parentLocation.bottom--" + parentLocation.bottom);
                if (iWidth <= 0 || iHeight <= 0) {
                    return;
                }
               int vWidth = aContainer.getWidth() - aContainer.getPaddingLeft() - aContainer.getPaddingRight();
                int vHeight = aContainer.getHeight() - aContainer.getPaddingTop() - aContainer.getPaddingBottom();
                int dHeight = ScreenUtil.getScreenHeight(aContainer.getContext());
                dHeight = dHeight < pbottom ? dHeight : pbottom;
    
                if (iWidth * vHeight < iHeight * vWidth || iHeight > vHeight) {
                    // avoid over scroll
                    if (y < ptop - vHeight) {
                        y = ptop - vHeight;
                    } else if (y > dHeight) {
                        y = dHeight;
                    }
                    y = y - ptop;
                    ALog.single().ld("target y:" + y);
                    float imgScale = (float) vWidth / (float) iWidth;
                    float imgMaxMoveScope = Math.abs((iHeight * imgScale - vHeight));
                    int itemMaxMoveScope = pbottom - ptop - vHeight;
                    float translateY = -(imgMaxMoveScope * y / itemMaxMoveScope);
                    canvas.translate(0, translateY);
                }
            }
        }
    }
    

    这个动效的实现思路基本就是上面那个图片的体现。

    到这个时候,一个可移植性比较高的滑动平行逆差效果就实现了,简单简洁。怎么使用呢,还是上代码吧,一种相当简易的使用,放到ScrollView中。

    —-步骤 1

    布局代码

    ...<sth like scrollview>...省略某些
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:background="#66ffffff"
                  android:orientation="horizontal"
                  android:padding="10dp">
        <com.cysion.adjointlib.view.AdjointContainer
            android:id="@+id/container"
            android:layout_width="180dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp"
            >
            <com.cysion.adjointlib.view.AdjointImageView
                android:id="@+id/img_holder_img"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:background="#99ff0000"
                android:padding="3dp"
                />
        </com.cysion.adjointlib.view.AdjointContainer>
        ...other view...
    </LinearLayout>
    ...</sth like scrollview>...

    —步骤 2

    获得滑动容器的位置信息,以Rect标示,并提供一个Locator来传递给AdjointContainer.省略了一些,就是onCreate方法中获得滑动容器的位置,提供给包装容器。

    public class SecondActivity extends AppCompatActivity implements Locator...
    mContainer1 = (AdjointContainer) findViewById(R.id.adcontainer1);
    ..  {
            mScrollView.post(new Runnable() {
                @Override
                public void run() {
                mScrollView.getGlobalVisibleRect(mR);
                mContainer1.setLocator(SecondActivity.this);
            }
    });
    ..  }
        @Override
        public Rect getLocation() {
            return mR;
        }
    

    —步骤 3

    创建AdjointStyle对象,并设置给容器。

     AdjointStyle style= new VerticalMoveStyle().minScale(0.9f);
     mContainer1.addStyle(style);

    此时,滑动容器滑动时,图片也会滑动,产生逆差效果。


    上面主要介绍了思路。完整例子见github仓库

    作者刘咸尚

    展开全文
  • 实现前端弹簧动效

    2019-09-22 23:40:04
    弹簧动效是IOS系统原生自带的一个效果,如在iPhone上面的照片点开大的展示效果就是一个弹簧动画,如下所示: 它一个弹闪的过程,一大一小交替缩放就像一个弹簧在弹动一样,而不是以往那种简单的线性...

    弹簧动效是IOS系统原生自带的一个效果,如在iPhone上面的照片点开大图的展示效果就是一个弹簧动画,如下图所示:

    它有一个弹闪的过程,一大一小交替缩放就像一个弹簧在弹动一样,而不是以往那种简单的线性变大。

    如果使用CSS的animation-timing-function只是改变运动的速度,不能改变运动的方向。

    而自己手动写CSS模拟这种先变大再变小的效果:

    @keyframes spring-show {
        0% {
            transform: scale(0);
        }
        90% {
            transform: scale(1);
        }
        /* 先放大一点 */
        95% {
            transform: scale(1.1);
        }
        /* 然后再缩回去 */
        100% {
            transform: scale(1);
        }
    }

    是没有这种弹性动感的。

    因为要实现一个弹簧振动效果,需要有两个参数,一个是阻尼系数damping ration,另一个是刚度stiffness,阻尼系数决定了衰减的快慢,刚度决定了往返的周期长短。给定这两个参数和弹簧的始末位移,根据一些物理公式可以推导出任意时刻弹簧的位移,这个位移就可以当作上面的scale缩放的值,或者是translate、rotate等的值。

    那怎么算呢?大漠在《CSS如何实现弹簧动画效果》也详细地讨论了这种效果,并写一个SASS函数实现,不过这种方式生成的CSS普遍比较大,所以我改用了JS实现,原理都是计算一个CSS的keyframes关键帧动画的在1%, 2%, 3%, ..., 100%的时候属性值应该是多少,然后再动态地插入一个style标签。这里借用了一个css spring的库,这个库gzip后只有3KB,使用方法如下:

    import spring, { toString } from 'css-spring';
    const keyframes = spring(
        { scale: 0 }, // from
        { scale: 1 }, // to
        // precision表示精度有2位
        { damping: 14, stiffness: 170, precision: 2}
    );
    const keyframeString = toString(keyframes);
    console.log(keyframeString);

    生成的CSS如下图所示:

    它会有一个大小的变化过程:0 -> 1 -> 1.1 -> 0.99 -> 1,把这些值画成一个图表看起来更加直观:

    可以看到它有一个抖动且周期衰减的过程,实际的效果如下图所示:

    除了放大,缩小也能这样处理,还可以应用于旋转,效果如下图所示:

    这个是用下面的代码生成的:

    const keyframes = spring(
        { rotateZ: 30 }, // from
        { rotateZ: 0 }, // to
        { damping: 14, stiffness: 170, precision: 3}
    );

    当我们需要借助animation-delay让3个星星逐个出现的时候,需要先visibility: hidden隐藏然后再出现,这个时候需要在keyframes里面添加visibility属性,如下代码所示:

    let from = {rotateZ: '30', visibility: 'hidden' },
        to = {rotateZ: '0', visibility: 'visible' };
    if (from.visibility) {
        keyframes['0%'].visibility = from.visibility;
        keyframes['1%'].visibility = to.visibility;
        // 最后结束animate-fill-mode: forwards使用
        keyframes['100%'].visibility = to.visibility;
    }

    最后生成一个keyframes:

    @keyframes spring-rotate {
        0% {transform:rotateZ(29.1deg);visibility:hidden;}
        1% {transform:rotateZ(27.507deg);visibility:visible;}
        /* ... */
        100% {transform:rotateZ(0deg);visibility:visible;}
    }

    再让每个star星星的animation-delay依次增大:

    .star {
        visibility: hidden;
        animation: spring-rotate .59s linear forwards;
    }
    .star:nth-of-type(2) {
        animation-delay: .15s;
    }
    .star:nth-of-type(3) {
        animation-delay: .3s;
    }

    这样就能实现逐个出现的效果了,如下图所示:

    这种弹簧动效能够增强动感,比普通的单向效果看起来更带感。

    在实际的实现中我写了一个util,当页面初始化的时候就生成keyframes,然后插入一个style标签放在head里面。因为如果再加上webkit前缀,一个keyframes有4KB,10个就有40KB,直接用JS动态计算的方式,会更省空间,灵活性也更强一点。


    【人人网招聘中高级前端】

    1. 项目背景: 我们在做一个企业级海外的SAAS CRM(客户管理系统)产品, 前端的技术挑战很大, 比如在我们的网站让客户直接打网络电话(直接打手机那种), 发email, 自动根据用户场景处理业务等。

    2. 技术栈背景: 也是采用比较流行的vue, vuex等框架, 通讯是WebRTC, 消息分发系统用Google的FCM和苹果的APN。服务部署在亚马逊或谷歌云上。服务全球客户。

    3. 另外因为产品是一个企业级用户产品所以个方面要求比较高(比如性能,安全,多任务处理等)。所以对候选人技术要求比较高,如果您对技术特别在意,那么我们的空缺提供了很好的才能发挥空间和锻炼成长的机会。

    请将简历发至shanshan.zhu@renren-inc.com


    【其它文章】实现WebRTC P2P连接


    展开全文
  • 先上效果和github地址,其他好的动效大家也可以交流~动效的原地址,在uimovement网站上看到这个动效时感觉特别6,就想自己实现一下,费了很长时间,换了几种方案终于实现出来了,下面是实现的步骤:分析动效写一...
  • 前言写这个只是更好的梳理下我实现过程中遇到的奇奇怪怪的问题,因为着实浪费了我不少时间…肯定不少也碰到过其中的问题希望对小伙伴有所帮助。效果我命名为spread的效果,其实就是结合放大和旋转以及透明度的特性...
  • 先上效果和github地址,完整代码个demo和进入查看,其他好的动效大家也可以学习交流~分析动效写一个动效的第一步就应该仔细的去分析它,把它的每一帧展开来看,找一个最合适的方式来实现它,我们可以把以上动画...
  • 写这个只是更好的梳理下我实现过程中遇到的奇奇怪怪的问题.. 因为着实浪费了我不少时间..肯定不少也碰到过其中的问题 希望对小伙伴有所帮助 效果 我命名为spread的效果,其实就是结合放大和旋转以及透明...
  • 手淘互动动效的探索

    2017-09-04 14:09:37
    摘要: 现在的营销活动,用一张简单的图片去吸引消费者已经远远不够,必须要能给消费者带来视觉冲击的东西,或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从Gif、视频到CSS Animation的从0-1的过程...
  • QQ的击掌动效

    千次阅读 2018-07-15 18:38:12
    点击图标之后会一个击掌动态持续几秒,即双方击掌的整个完整过程!增加了趣味和互动性,同时该功能的添加可以作为对点赞方的一个回应,告知对方已看到点赞,增加双方的互动和整个过程的乐趣,而非单方面的点赞...
  • 写这个只是更好的梳理下我实现过程中遇到的奇奇怪怪的问题.. 因为着实浪费了我不少时间..肯定不少也碰到过其中的问题 希望对小伙伴有所帮助 效果 我命名为spread的效果,其实就是结合放大和旋转以及透明度的...
  • 滑动内联动效 指的是 在容器滑动的过程中,其子View对应展现出来的一些效果。本篇主要记录的是在容器滑动过程中,它的item伴随进行缩放和透明度变化。上,明了。1中,随着滑动,内部item呈现先变大再变小的趋势...
  • 先上效果和github地址,欢迎欢迎star,完整代码个demo和进入查看,其他好的动效大家也可以学习交流~ 分析动效 写一个动效的第一步就应该仔细的去分析它,把它的每一帧展开来看,找一个最合适的方式来实现它,...
  • 这类应用的视觉设计通常效果炫酷,动效丰富,时候一些页面布局和动画实现会对前端人员一定的挑战性,在这里分享一些大屏可视化应用数据面板实现过程中遇到的问题及其解决方案。 分格渐变进度条、数字翻牌器及其...
  • 导语:直播过程中,往往会各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,往往使用css来完...
  • 本文包含动图较多,总共大约10M,移动端请谨慎 本文示例代码下载 Apple Watch 第三代发布的时候,我借健身的理由入手了一个。除了丰富的各种类型运动数据记录功能外,令我印象深刻的便是定时提醒我呼吸应用里的...
  • 了这个进度条之后,当我们的进度从40%到50%这个持续的过程中,界面再也不会出现假死的情况,是不是很完美呢。。。 下面我就来分析下这个动效进度条是怎么做的 二、动效进度条 如效果所示,光效进度条不同于一般...
  • 轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的...
  • 这是在作图时突然迸发的灵感(是的,偶尔也会那么一瞬间头脑开窍),作为设计师小伙伴们,平时用的最多的应该是布尔运算吧,...所以在做矢量过程就突然想到如果能用SVG结合CSS3的动效来还原这个设计过程,也...
  • 例如受邀进入了某个神秘的动效组织,全是一线的大神啊。UI的大牛、UED的大神、iOS的大神。加入组织可以阅读这里:加入CRAnimation组织 。 真的是发现坚持写作,其实也是逼迫自己坚持不断学习的过程。那么,来来来...
  • 先上效果:(demo地址)步骤分析这个动效看起来很特色但是实现起来是非常简单的,只需要用到CALayer和CAShapeLayer做为展示层,然后通过CABasicAnimation实现动画就行了~ 用两个CALayer来呈现启动的image 通
  • 有动效 限制显示区域 可拖动 可固定到浏览器 根据浏览器100%宽度 下面根据限制显示区域这个功能设置一个简单的介绍卡 功能介绍: 它的功能是鼠标移入图片一个放大的效果,并且文字的显示和一个渐隐的...
  • 最近视觉给了一个动效,类似于图片选择框的效果,其中包含选择框的一个从无到的的放大过程。因为裁剪框位置不固定,视觉不能给出统一的动效,因此需要自己动手实现 我所掌握的资料:裁剪框的四点坐标。第一想法是...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

有过程动效图