【Android】加入購(gòu)物車賽貝爾曲線動(dòng)畫效果

public class Anim {


    private final long durationTime = 500;//動(dòng)畫持續(xù)時(shí)間


    /**
     * 添加商品到購(gòu)物車的動(dòng)畫效果
     *
     * @param goodsImg       進(jìn)行于移動(dòng)的商品圖片就是列表里商品圖片
     * @param relativeLayout 頁(yè)面父布局
     * @param shoppingCarImg 購(gòu)物車圖片
     */
    public void addGoodsToCart(Context context, ImageView goodsImg, RelativeLayout relativeLayout, ImageView shoppingCarImg, String productImageUrl) {


        //這里用superTextView承載一個(gè)圓形的圖片
        final SuperTextView goods = new SuperTextView(context);
        goods.setUrlImage(productImageUrl);
        goods.setCorner(50);//設(shè)置圓角
        goods.setStrokeColor(Color.RED);//邊框顏色
        goods.setStrokeWidth(4);//邊框?qū)挾?

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(68, 68);
        relativeLayout.addView(goods, params);

        //父布局起始坐標(biāo)
        int[] parentLocation = new int[2];
        relativeLayout.getLocationInWindow(parentLocation);

        //得到商品的圖片坐標(biāo)
        int startLoc[] = new int[2];
        goodsImg.getLocationInWindow(startLoc);

        //購(gòu)物車圖片坐標(biāo)
        int endLoc[] = new int[2];
        shoppingCarImg.getLocationInWindow(endLoc);


        //開始掉落的商品的起始點(diǎn):
        //簡(jiǎn)單來說就是該商品圖片的中心點(diǎn)
        float startX = startLoc[0] - parentLocation[0];
        float startY = startLoc[1] - parentLocation[1];

        // 商品掉落后的終點(diǎn)坐標(biāo):購(gòu)物車起始點(diǎn)-父布局起始點(diǎn)
        float toX = endLoc[0] - parentLocation[0];
        float toY = endLoc[1] - parentLocation[1];

        //繪制貝塞爾曲線
        Path path = new Path();
        //路徑移動(dòng)到起始點(diǎn)
        path.moveTo(startX, startY);
        // 使用二階貝塞爾曲線:注意第一個(gè)起始坐標(biāo)越大采驻,貝塞爾曲線的橫向距離就會(huì)越大
        path.quadTo((startX + toX) / 2, startY, toX, toY);

        //用來計(jì)算貝塞爾曲線的曲線長(zhǎng)度和貝塞爾曲線中間插值的坐標(biāo),如果是true匈勋,path會(huì)形成一個(gè)閉環(huán)
        PathMeasure pathMeasure = new PathMeasure(path, false);

        // 屬性動(dòng)畫實(shí)現(xiàn)(從0到貝塞爾曲線的長(zhǎng)度之間進(jìn)行插值計(jì)算挑宠,獲取中間過程的距離值)
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
        valueAnimator.setDuration(durationTime);//圖片持續(xù)時(shí)間


        // 貝塞爾曲線中間過程點(diǎn)坐標(biāo)
        float[] currentPosition = new float[2];

        // 加速插值器
        valueAnimator.setInterpolator(new AccelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 當(dāng)插值計(jì)算進(jìn)行時(shí),獲取中間的每個(gè)值颓影,
                // 這里這個(gè)值是中間過程中的曲線長(zhǎng)度(下面根據(jù)這個(gè)值來得出中間點(diǎn)的坐標(biāo)值)
                float value = (Float) animation.getAnimatedValue();
                // 獲取當(dāng)前點(diǎn)坐標(biāo)封裝到currentPosition
                // boolean getPosTan(float distance, float[] pos, float[] tan) :
                // 傳入一個(gè)距離distance(0<=distance<=getLength())各淀,然后會(huì)計(jì)算當(dāng)前距離的坐標(biāo)點(diǎn)和切線,pos會(huì)自動(dòng)填充上坐標(biāo)诡挂,這個(gè)方法很重要碎浇。
                // currentPosition此時(shí)就是中間距離點(diǎn)的坐標(biāo)值
                pathMeasure.getPosTan(value, currentPosition, null);
                // 移動(dòng)的商品圖片(動(dòng)畫圖片)的坐標(biāo)設(shè)置為該中間點(diǎn)的坐標(biāo)
                goods.setTranslationX(currentPosition[0]);
                goods.setTranslationY(currentPosition[1]);
            }
        });


        // 開始執(zhí)行動(dòng)畫
        valueAnimator.start();
        valueAnimator.setStartDelay(500);//動(dòng)畫延遲執(zhí)行時(shí)間

        // 動(dòng)畫結(jié)束后的處理
        valueAnimator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                onAddGoodsToCartListener.start();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //這里可以拿出接口,寫購(gòu)物車的變化
                LogUtils.d("動(dòng)畫效果結(jié)束");
                relativeLayout.removeView(goods);//移除移動(dòng)的圖片

                onAddGoodsToCartListener.end();
            }
        });

    }


    public interface OnAddGoodsToCartListener {
        void start();

        void end();
    }

    private OnAddGoodsToCartListener onAddGoodsToCartListener;

    public void setOnAddGoodsToCartListener(OnAddGoodsToCartListener onAddGoodsToCartListener) {
        this.onAddGoodsToCartListener = onAddGoodsToCartListener;
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末璃俗,一起剝皮案震驚了整個(gè)濱河市奴璃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌城豁,老刑警劉巖苟穆,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異唱星,居然都是意外死亡雳旅,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門间聊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來攒盈,“玉大人,你說我怎么就攤上這事哎榴⌒突恚” “怎么了僵蛛?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)迎变。 經(jīng)常有香客問我充尉,道長(zhǎng),這世上最難降的妖魔是什么衣形? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任喉酌,我火速辦了婚禮,結(jié)果婚禮上泵喘,老公的妹妹穿的比我還像新娘。我一直安慰自己般妙,他們只是感情好纪铺,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著碟渺,像睡著了一般鲜锚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上苫拍,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天芜繁,我揣著相機(jī)與錄音,去河邊找鬼绒极。 笑死骏令,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的垄提。 我是一名探鬼主播榔袋,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼铡俐!你這毒婦竟也來了凰兑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤审丘,失蹤者是張志新(化名)和其女友劉穎吏够,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體滩报,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锅知,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了脓钾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喉镰。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖惭笑,靈堂內(nèi)的尸體忽然破棺而出侣姆,到底是詐尸還是另有隱情生真,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布捺宗,位于F島的核電站柱蟀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蚜厉。R本人自食惡果不足惜长已,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望昼牛。 院中可真熱鬧术瓮,春花似錦、人聲如沸贰健。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伶椿。三九已至辜伟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間脊另,已是汗流浹背导狡。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留偎痛,地道東北人旱捧。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像踩麦,于是被迫代替她去往敵國(guó)和親廊佩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容