Làm cách nào để thực hiện bộ hẹn giờ đếm ngược cuộn theo chiều ngang?

Question

Mục tiêu Tôi muốn triển khai đồng hồ đếm ngược chỉ cuộn số (không phải đồ họa) từ trái sang phải.

Hiệu lực Hiệu ứng sẽ trông giống như phóng to số từ bên trái, làm chậm về phía giữa và sau đó phóng to sang phải.

Ghi chú Vì tôi đã sử dụng TimerTask để thực thi mã mỗi giây, tôi có thể sử dụng để kích hoạt số tiếp theo để cuộn qua chế độ xem văn bản theo chiều ngang.

Điều này chỉ có thể được triển khai dưới dạng chế độ xem văn bản bên trong một chế độ xem cuộn không? Tìm kiếm một mẫu mã để bắt đầu với ....

Answer 1

Sử dụng Ảnh động sẽ là giải pháp đơn giản nhất. Bạn có thể tạo của riêng bạn hoặc thử và kết hợp nhiều TranslateAnimations và ScaleAnimations.

Điều này có nghĩa là đặt từng số vào TextView của riêng nó thay vì sử dụng chế độ xem cuộn.

Sau đó, bạn có thể kiểm soát gia tốc ở giữa với Interpolator. Nội suy là cách Android xử lý giảm bớt. Bạn có thể muốn AccelerateDecelerateInterpolator để tăng tốc/làm chậm hiệu ứng.

Bạn có thể sử dụng AnimationSet để áp dụng nhiều hoạt ảnh cho cùng một Chế độ xem. Tìm hiểu làm thế nào để đặt cùng một AnimationSet tốt sẽ là một phần khó khăn nhất của dự án. Đảm bảo chú ý đến thuộc tính "lấp đầy". Trong thực tế sau khi chơi xung quanh một chút, tôi nghĩ rằng một hình ảnh động tùy chỉnh là đơn giản hơn bằng cách sử dụng những người sẵn sàng thực hiện.

Bạn có thể ngã ba my GitHub project triển khai phiên bản rất đơn giản này. 17 tháng 4 và trước khi tôi sử dụng nhiều Ảnh động được tạo trước. Nếu bạn xem phiên bản mới nhất, bạn sẽ thấy hoạt ảnh tùy chỉnh.

Thời gian cho mỗi Hoạt ảnh sẽ tự chăm sóc sau khi bạn đặt thời lượng cho một Hoạt ảnh. A Handler gọi số tiếp theo sau khi số trước đó kết thúc. Tôi nghĩ rằng đây là một chút neater hơn phải gọi một chức năng mỗi X giây để cập nhật tất cả mọi thứ.

Khái quát các chức năng:

• Tích Cực (CountDownActivity.java) so với nhìn thấy tất cả mọi thứ.
  
  • Bố cục của Activitiy XML có nút được sử dụng để bắt đầu đếm ngược.
  • Khi đếm ngược bắt đầu, nút sẽ biến mất. Nó xuất hiện trở lại khi đếm ngược được thực hiện.
• Activity chứa một Handler (MotionHandler.java). Handler kiểm soát chuyển động và thời gian của các số.
  • Các Handler sử dụng một AnimationSet để di chuyển những con số
    • Các AnimationSet là một trôi qua trong sự phụ thuộc
      • Đây là sự linh hoạt. Đơn giản chỉ cần vượt qua trong một AnimationSet khác nhau để thay đổi cách các con số di chuyển
      • Các AnimationSet được làm bằng Bốn Animations một Animation tùy chỉnh (xem dưới đây)
  • Các AnimationSet sử dụng một chia sẻ AccelerateDecelerateInterpolator, mà dường như làm việc một cách dứt khoát. Có các tùy chọn khác, bao gồm cả việc viết riêng của bạn.
  • Các Handler sử dụng một delayed message để bắt đầu số tiếp theo
  • Các Handler thông báo cho Hoạt động khi đếm ngược được thực hiện sử dụng một người biết lắng nghe tùy chỉnh (MotionHandler >> CountdownListener)
• Xoay thiết bị sẽ khởi động lại đếm ngược.

Lưu ý - trước đây tôi đã sử dụng bốn ảnh động sẵn sàng trong một AnimationSet, tôi đã chỉnh sửa để chỉ bao gồm một hoạt ảnh tùy chỉnh ... Bạn có thể tinh chỉnh thuật toán theo ý thích của bạn.

Hoạt ảnh tùy chỉnh này sử dụng Cycloid để làm cho các số xuất hiện lớn hơn và nhỏ hơn.

/** 
* A custom animation to move and scale the numbers. 
* 
*/ 
public class NumberAnimation extends Animation 
{ 
    final public static float MINIMUM = 3; 
    private int mHorizontal; 
    private int mScaling; 

    public NumberAnimation(int horizontalMovement, int scaling) 
    { 
     mHorizontal = horizontalMovement; 
     mScaling = scaling; 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) 
    { 
     // Cycloid repeats every 2pi - scale interpolatedTime to that 
     double time = 2 * Math.PI * interpolatedTime; 
     // Cycloid function 
     float currentScale = (float) (mScaling * (1 - Math.cos(time))) + MINIMUM; 
     Matrix matrix = t.getMatrix(); 
     matrix.preScale(currentScale, currentScale); 
     matrix.postTranslate(mHorizontal * interpolatedTime, 0); 
    } 
} 

Answer 2

Easing sẽ giúp bạn kiểm soát tốc độ.