Question

我正在尝试编写一个for循环来重复“爆炸”路径的动画，当单击一个形状按钮但是for循环没有工作/执行时我无法看到它出错的地方。 for循环的目标：循环动画路径的过程，然后将动画反转回其原始路径。我知道问题在for循环中的某个地方就像在循环工作之前的explode.animate（）方法一样。

注意：我正在使用Raphael.js制作这个动画

var explode = paper.path("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z");
explode.attr({'fill':"yellow", 'stroke-width':"4"});
explode.hide();


function explode1() {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
}

function explode2() {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}


bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');

for(var i = 0; i < 4; i+=1) {
    if (i % 2 == 0) {
    explode1();
    } else {
    explode2();
    }
}
});

我也尝试将animate方法直接放入for循环中，而不是将它们写成函数，for循环仍然不起作用。

bomb1.click(function() {
    audio.pause();
    audio.currentTime = 0;
    bomb1.remove();
    explode.show();
    explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');

for(var i = 0; i < 5; i+=1) {
    if (i % 2 == 0) {
    explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
    } else {
    explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
    }
};

Answer 1

动画不是同步的。我的意思是animate()循环在执行循环的下一步之前不会等待动画完成。他们都将在同一时间开始。

您需要做的是在第一个动画完成后触发下一个动画。 RaphaelJS允许您将函数传递给动画完成时调用的LocationManager locManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE); boolean network_enabled = locManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER); Location location; if (network_enabled) { if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) { // TODO: Consider calling // ActivityCompat#requestPermissions // here to request the missing permissions, and then overriding // public void onRequestPermissionsResult(int requestCode, String[] permissions, // int[] grantResults) // to handle the case where the user grants the permission. See the documentation // for ActivityCompat#requestPermissions for more details. ; } ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.ACCESS_COARSE_LOCATION,Manifest.permission.ACCESS_FINE_LOCATION}, 1); location = locManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER); if(location!=null){ lat = location.getLongitude(); lon = location.getLatitude(); Log.d("lat", "onCreate: "+lat+","+lon); txtLocation.setText(+lat+","+lon); AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this); alertDialogBuilder.setMessage("Latitude:"+lat+"\n"+"Longitude:"+lon); AlertDialog alertDialog = alertDialogBuilder.create(); alertDialog.show(); } } } @Override public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) { Log.d("", "onRequestPermissionsResult: "+requestCode); Toast.makeText(MainActivity.this, ""+grantResults.length, Toast.LENGTH_SHORT).show(); switch (requestCode) { case 1: { // If request is cancelled, the result arrays are empty. if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) { Toast.makeText(MainActivity.this, "Granted", Toast.LENGTH_SHORT).show(); // permission was granted, yay! Do the } else { Toast.makeText(MainActivity.this, "Denied", Toast.LENGTH_SHORT).show(); //user denied permission additionally you can check //ActivityCompat.shouldShowRequestPermissionRationale if user checked on "do not show again" while clicking deny } return; } // other 'case' lines to check for other // permissions this app might request } }方法。

请参阅以下问题以获取示例：

animating paths with raphael

for循环不适用于JavaScript动画

1 个答案: